/* ================================
Global / Variables
================================ */
:root {
  --green: #0b9b6a;
  --green-d: #087f56;
  --green-btn: #0a8f63;
  --wa: #10d97a;
  --gold: #c9972b;
  --ink: #0f1a1c;
  --text: #4b5563;
  --muted: #6b7280;
  --line: #e5eaea;
  --bg: #f4f8f8;
  --white: #fff;
  --blue: #1e3a8a;
  --shadow: 0 8px 30px rgba(15,60,50,.07);
  --max: 1600px;
  --gutter: 15px;
  --section-pad: 60px;
  --head-gap: 40px;
  --block-gap: 60px;
  --font: 'Poppins',system-ui,sans-serif;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: #fff;
  overflow-x: hidden;
}

.page-loader {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: #fff;
  color: #0b1622;
  opacity: 1;
  transition: opacity .5s ease, visibility .5s ease;
}

.page-loader.is-closing {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.page-loader-logo {
  width: 250px;
  height: auto;
  object-fit: contain;
  animation: page-loader-logo 1.8s ease-in-out infinite;
}

.page-loader-message {
  min-height: 24px;
  margin: 0;
  color: #0b1622;
  font-family: var(--font);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}

.page-loader-cursor {
  display: inline-block;
  height: 1.1em;
  margin-left: 3px;
  vertical-align: text-bottom;
  border-right: 2px solid #25d366;
  animation: page-loader-cursor .7s step-end infinite;
}

@keyframes page-loader-logo {
  0%, 100% {
    opacity: .35;
    transform: scale(.96);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes page-loader-cursor {
  50% {
    border-color: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-loader-logo {
    animation: none;
  }
}

img, svg {
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, p {
  margin: 0;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

svg {
  width: 1em;
  height: 1em;
  flex: none;
}

/* Hidden SVG icon sprite */
.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.container {
  width: min(var(--max),100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-pad);
}

.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
}

.section-head h2 {
  font-size: clamp(1.75rem,3.2vw,40px);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
}

.section-head h2 span {
  color: var(--gold);
}

.section-head p {
  margin-top: 12px;
  color: var(--text);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: 16px;
  border-radius: 999px;
  transition: .2s;
}

:focus-visible {
  outline: 2px solid var(--green-btn);
  outline-offset: 2px;
}

.floating-whatsapp, .floating-back-to-top {
  position: fixed;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
  transition: transform .2s, box-shadow .2s, background-color .2s;
}

.floating-whatsapp {
  bottom: 24px;
  left: 24px;
  width: 45px;
  height: 45px;
  color: #fff;
  background: #25d366;
}

.floating-whatsapp svg {
  width: 25px;
  height: 25px;
  fill: currentColor;
  display:flex;
}

.floating-back-to-top {
  right: 24px;
  bottom: 28px;
  width: 45px;
  height: 45px;
  color: #fff;
  background: var(--ink);
  cursor: pointer;
}

.floating-back-to-top[hidden] {
  display: none;
}

.floating-back-to-top svg {
  width: 25px;
  height: 25px;
}

.floating-whatsapp:hover, .floating-back-to-top:hover {
  transform: translateY(-3px);
  box-shadow: 0 7px 20px rgba(0, 0, 0, .24);
}

.floating-back-to-top:hover {
  background: var(--green-d);
}

@media (max-width: 480px) {
  .floating-whatsapp {
    bottom: 16px;
    left: 16px;
    width: 52px;
    height: 52px;
  }
  .floating-back-to-top {
    right: 16px;
    bottom: 18px;
    width: 44px;
    height: 44px;
  }
}

/* ================================
Header / Navbar
================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  box-shadow: 0 1px 12px rgba(0,0,0,.05);
  border-top: 2px solid #f3e6df;
}

.header-inner {
  max-width: var(--max);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 15px;
  gap: 16px;
  position: relative;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.brand-logo {
  /* width: 50px; */
  height: auto;
}
 .brand-logo-nav{
    width:250px;
    /* height: auto; */
  }
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand-text strong {
  font-size: 18px;
  color: var(--green-d);
  font-weight: 500;
}

.brand-text strong span, .footer-name span {
  color: var(--blue);
}

.brand-text small {
  font-size: 11px;
  color: var(--text);
}

.main-nav {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: space-between;
}

.nav-list {
  display: flex;
  gap: 4px;
  margin: 0 auto;
  padding-left: 80px;
}

.nav-item {
  position: relative;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 22px;
  border-radius: 999px;
  color: #2c3a3c;
  font-weight: 500;
  font-size: 16px;
  transition: .2s;
}

.nav-link:hover, .nav-link.active, .nav-item.open>.nav-link {
  background: #e3f1ed;
  color: var(--green);
}

.chev {
  width: 14px;
  height: 14px;
  transition: .2s;
}

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

.nav-actions {
  display: flex;
  align-items: center;
  gap: 28px;
}

.login-link {
  font-weight: 500;
  color: rgb(51, 51, 51);
  background: rgb(255, 255, 255);
  border: 1px solid var(--line);
  padding: 10px 18px;
  border-radius: 10px;
}

.login-link:hover {
  border-color: var(--green);
  color: var(--green);
  transition: all .2s;
}

.btn-register {
  background: #0b9b6a;
  color: #fff;
  padding: 10px 18px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(11,155,106,.3);
}

.btn-register:hover {
  background: #087f56;
}

.mega-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,.14);
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: .2s;
  z-index: 60;
}

.nav-item.open .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.mega-features {
  width: min(646px,90vw);
  left: -60px;
}

.mega-integrations {
  width: min(450px,90vw);
  left: -70px;
}

.mega-link {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-bottom: 1px solid var(--line);
}

.mega-link:nth-child(odd) {
  border-right: 1px solid var(--line);
}

.mega-link:hover {
  background: #f6faf9;
}

.mega-link b {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
}

.mega-link small {
  display: block;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
  margin-top: 4px;
}

.mi {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex: none;
}

.mi svg {
  width: 18px;
  height: 18px;
}

.mi-blue {
  background: #e8f0fe;
  color: #4a7bd6;
}

.mi-orange {
  background: #ffeedd;
  color: #e8803a;
}

.mi-green {
  background: #e4f9ec;
  color: #16a361;
}

.mi-teal {
  background: #d9f7ef;
  color: #12a889;
}

.mi-purple {
  background: #f3e5fb;
  color: #a259d6;
}

.mi-yellow {
  background: #fff6cc;
  color: #d9a30a;
}

.mi-red {
  background: #fde4e4;
  color: #e0504e;
}

.mi-indigo {
  background: #e7e9fd;
  color: #5b5fe0;
}

.mi-pink {
  background: #fde4f1;
  color: #d6469a;
}

.mi-violet {
  background: #f0e6fd;
  color: #8b5cf6;
}

.mega-foot {
  grid-column: 1/-1;
  background: #f7f9fa;
  padding: 12px 14px;
  color: #16a361;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
}

.mega-foot svg {
  width: 14px;
  height: 14px;
}

.nav-toggle {
  display: none;
}

/* ================================
Hero Section
================================ */
.hero {
  background: linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(16,185,129,.07) 50%,rgba(255,255,255,0) 100%),repeating-linear-gradient(90deg,#f3f8f6 0 90px,#eef6f2 90px 180px);
  position: relative;
  overflow: hidden;
}

.hero-inner {
  max-width: var(--max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  gap: 24px;
  padding: 60px var(--gutter);
}

.hero-content {
  min-width: 0;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f1fbf6;
  border: 1px solid #c9ecd9;
  color: var(--green-d);
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
}

.badge i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #16c46a;
}

.hero h1 {
  margin-top: 28px;
  font-size: clamp(2.2rem,5.4vw,4rem);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -.04em;
  color: var(--ink);
}

.hero h1 span {
  display: block;
  color: var(--green);
}

.hero-lead {
  margin-top: 24px;
  max-width: 520px;
  color: #3d4a4c;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.btn-primary {
  background: var(--green);
  color: #fff;
  padding: 14px 32px;
  box-shadow: 0 8px 20px rgba(4,120,87,.28);
}

.btn-primary:hover {
  background: var(--green-d);
  transform: translateY(-1px);
}

.btn-outline {
  background: #fff;
  border: 1px solid var(--line);
  color: #333;
  padding: 14px 32px;
}

.btn-outline:hover {
  border-color: var(--green);
  color: var(--green);
}

.hero-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 24px;
  color: #8a9496;
}

.hero-checks li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hero-checks svg {
  color: #34c38a;
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 36px;
  margin-top: 36px;
}

.proof {
  display: flex;
  gap: 12px;
  align-items: center;
}

.proof p {
  line-height: 1.4;
  color: var(--muted);
}

.proof b {
  display: block;
  color: var(--ink);
  font-weight: 600;
}

.proof-img {
  width: 50px;
  height: 50px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-size: 9px;
  flex: none;
}

.proof-img.cert {
  background: linear-gradient(135deg,#f08a3c,#c9531b);
  clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  border: 0;
}

/* ================================
Hero Visual (animated logo scene)
================================ */
.hero-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  overflow: visible;
  perspective: 1000px;
}

.hero-scene {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%,520px);
  aspect-ratio: 1;
  transform-style: preserve-3d;
  will-change: transform;
  user-select: none;
  animation: heroSceneFloat 6s ease-in-out infinite;
}

.hero-glow {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.hero-glow-lg {
  width: 88%;
  background: radial-gradient(circle,rgba(37,211,102,.14) 0%,rgba(0,128,105,.08) 40%,rgba(0,163,255,.04) 65%,transparent 75%);
  filter: blur(35px);
}

.hero-glow-sm {
  width: 54%;
  background: radial-gradient(circle,rgba(0,163,255,.16) 0%,rgba(37,211,102,.12) 50%,transparent 70%);
  filter: blur(22px);
}

.hero-orbit {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  transform-style: preserve-3d;
  pointer-events: none;
  will-change: transform;
}

.hero-orbit-1 {
  width: 85%;
  z-index: 2;
  border: 1.5px dashed rgba(0,128,105,.3);
  transform: rotateX(70deg) rotateZ(-25deg);
  animation: orbitRotateOne 12s linear infinite;
}

.hero-orbit-2 {
  width: 67%;
  z-index: 3;
  border: 1px solid rgba(0,163,255,.32);
  transform: rotateX(64deg) rotateZ(40deg);
  animation: orbitRotateTwo 9s linear infinite reverse;
}

.orbit-dot {
  position: absolute;
  border-radius: 50%;
}

.orbit-dot-green {
  width: 10px;
  height: 10px;
  top: -5px;
  left: 50%;
  margin-left: -5px;
  background: linear-gradient(135deg,#25D366,#008069);
  box-shadow: 0 0 10px #25D366;
}

.orbit-dot-blue {
  width: 8px;
  height: 8px;
  bottom: -4px;
  left: 50%;
  margin-left: -4px;
  background: linear-gradient(135deg,#00A3FF,#2563EB);
  box-shadow: 0 0 10px #00A3FF;
}

.orbit-dot-cyan {
  width: 7px;
  height: 7px;
  right: -4px;
  top: 50%;
  margin-top: -3px;
  background: #00E5FF;
  box-shadow: 0 0 8px #00E5FF;
}

.hero-shadow {
  position: absolute;
  bottom: 20%;
  width: 35%;
  height: 6%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,rgba(0,99,93,.45) 0%,rgba(0,163,255,.2) 50%,transparent 75%);
  filter: blur(12px);
  pointer-events: none;
  z-index: 4;
}

.hero-logo-wrap {
  position: relative;
  z-index: 10;
  width: 48%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  will-change: transform;
  cursor: pointer;
  animation: logoFloat 4.5s ease-in-out infinite;
}

.hero-logo-glow {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(37,211,102,.3) 0%,rgba(0,163,255,.25) 50%,transparent 75%);
  filter: blur(16px);
  pointer-events: none;
  z-index: -1;
  animation: logoGlow 3s ease-in-out infinite;
}

.hero-main-logo {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 14px 24px rgba(0,128,105,.28)) drop-shadow(0 20px 36px rgba(0,163,255,.22));
  will-change: transform;
  animation: logoRotate 10s ease-in-out infinite;
}

.hero-card {
  position: absolute;
  z-index: 15;
  will-change: transform;
}

.hero-card-api {
  top: 12%;
  right: -2%;
  animation: cardApiFloat 4s ease-in-out infinite;
}

.hero-card-meta {
  top: 19%;
  left: 0;
  z-index: 14;
  animation: cardMetaFloat 4.8s ease-in-out infinite;
}

.hero-card-ai {
  bottom: 14%;
  left: -4%;
  animation: cardAiFloat 4.4s ease-in-out infinite;
}

.hc-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: 30px;
  background: #fff;
  white-space: nowrap;
  transition: box-shadow .3s ease, transform .3s ease;
}

.hc-api {
  border: 1px solid #d1ede4;
  box-shadow: 0 8px 24px rgba(0,128,105,.12), 0 2px 6px rgba(0,0,0,.04);
}

.hc-ai {
  gap: 9px;
  border: 1px solid #bae6fd;
  box-shadow: 0 8px 24px rgba(0,163,255,.12), 0 2px 6px rgba(0,0,0,.04);
}

.hc-meta {
  gap: 6px;
  padding: 6px 13px;
  border-radius: 20px;
  border: 1px solid #e0f2fe;
  box-shadow: 0 4px 14px rgba(0,0,0,.05);
}

.hero-card:hover > .hc-pill {
  transform: translateY(-3px) scale(1.02);
}

.hc-title {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #111B21;
  line-height: 1.2;
}

.hc-sub {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
}

.hc-sub-green {
  color: #008069;
}

.hc-sub-blue {
  color: #0284C7;
}

.hc-meta-tick {
  font-size: 11.5px;
  font-weight: 700;
  color: #008069;
}

.hc-meta-text {
  font-size: 11px;
  font-weight: 600;
  color: #374151;
}

.hc-ping {
  position: relative;
  display: flex;
  width: 8px;
  height: 8px;
  flex: none;
}

.hc-ping i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25D366;
  animation: ping 1.6s cubic-bezier(0,0,.2,1) infinite;
}

.hc-ping b {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #25D366;
  box-shadow: 0 0 6px #25D366;
}

.hc-ai-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg,#00A3FF,#008069);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  flex: none;
  box-shadow: 0 0 8px rgba(0,163,255,.35);
}

/* ================================
Stats
================================ */
.stats {
  max-width: var(--max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  border-top: 1px solid var(--line);
  background: #fff;
}

.stat {
  text-align: center;
  padding: 32px 12px;
  border-right: 1px solid var(--line);
}

.stat:last-child {
  border-right: 0;
}

.stat strong {
  display: block;
  font-size: clamp(1.75rem,3vw,2.5rem);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.2;
}

.stat span {
  font-size: 16px;
  color: var(--text);
}

/* ================================
Trust Section (hotels & resorts)
================================ */
.trust {
  background: var(--bg);
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 20px;
  margin-inline: auto;
}

.trust-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 160px;
  padding: 24px 16px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}

.trust-card:hover {
  transform: translateY(-4px);
  border-color: #cfe3dc;
  box-shadow: 0 18px 40px rgba(15,60,50,.12);
}

.trust-logo {
  display: block;
  width: 90%;
  height: 100px;
  object-fit: contain;
}

.trust-name {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  color: #475569;
}

/* ================================
Features Section
================================ */
.features {
  background: linear-gradient(#f4f8f9,#fff);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 22px;
}

.feature-card {
  background: #fff;
  border-radius: 22px;
  padding: 20px;
  box-shadow: var(--shadow);
  transition: .25s;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(15,60,50,.12);
}

.fc-img {
  position: relative;
  aspect-ratio: 2/1;
  border-radius: 14px;
}

.fc-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
}

.fc-icon {
  position: absolute;
  z-index: 1;
  top: -12px;
  left: -11px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  color: var(--green);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.fc-icon svg {
  width: 18px;
  height: 18px;
}

.feature-card h3 {
  margin: 20px 0 10px;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}

.feature-card p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
}

/* ================================
Enterprise Section
================================ */
.enterprise {
  background: linear-gradient(#fff,#f4f8f9);
}

.ent-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 22px;
}

.ent-card {
  background: #fff;
  border-radius: 22px;
  padding: 34px 28px;
  box-shadow: var(--shadow);
}

.ent-card h3 {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 24px;
}

.ent-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #e1f3ee;
  color: var(--green);
  display: grid;
  place-items: center;
  flex: none;
}

.ent-icon svg {
  width: 20px;
  height: 20px;
}

.ent-card li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 0;
}

.ent-card li svg {
  color: var(--green);
  width: 18px;
  height: 18px;
}

/* ================================
Footer
================================ */
.site-footer {
  background: #fafafa;
  padding: 70px var(--gutter) 40px;
}

.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(260px,1.1fr) minmax(220px,.8fr) 2fr;
  gap: 40px;
  align-items: start;
}

.footer-name {
  font-size: 22px;
  color: var(--green-d);
  font-weight: 600;
}

.footer-brand p {
  margin: 14px 0 24px;
  color: var(--muted);
  font-size: 16px;
}

.btn-wa {
  background: var(--green);
  color: white;
  padding: 10px 22px;
  box-shadow: 0 4px 12px rgba(11, 155, 106, .3);
}

.btn-wa:hover {
  background: var(--green-d);
}

.footer-stats {
  background: #fff;
  border-radius: 18px;
  padding: 16px 22px;
  box-shadow: var(--shadow);
}

.fs {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.fs:last-child {
  border: 0;
}

.fs p {
  line-height: 1.3;
  color: var(--muted);
}

.fs b {
  display: block;
  color: var(--ink);
  font-weight: 600;
}

.fs-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
}

.fs-icon svg {
  width: 18px;
  height: 18px;
}

.fs-icon.green {
  background: #e0f9ec;
  color: #16a361;
}

.fs-icon.purple {
  background: #efe9fd;
  color: #8b5cf6;
}

.fs-icon.orange {
  background: #ffeedd;
  color: #f59e0b;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 24px;
}

.footer-links h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  padding: 6px 0 18px;
  border-bottom: 1px solid var(--line);
}

.c-green {
  color: #16a361;
}

.c-purple {
  color: #8b5cf6;
}

.c-blue {
  color: #3b82f6;
}

.footer-links li a {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  color: #2c3a3c;
  transition: .2s;
}

.footer-links li a:hover {
  color: var(--green);
  padding-left: 4px;
}

.footer-links li a::after {
  content: "›";
  color: #b8c0c2;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-top: 56px;
  padding-top: 36px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}

.fb-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.fb-logo {
  width: 24px;
  height: 24px;
  flex: none;
}

.fb-left p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}

.g {
  color: var(--green);
}

.u {
  text-decoration: underline;
}

.u:hover {
  color: var(--green);
}

.socials {
  display: flex;
  gap: 10px;
}

.socials a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #eef0f1;
  display: grid;
  place-items: center;
  color: #2c3a3c;
  font-size: 14px;
  font-weight: 600;
  transition: .2s;
}

.socials a:hover {
  background: var(--green);
  color: #fff;
}

/* ================================
Animations
================================ */
@keyframes floaty {
  50% {
    transform: translateY(-6px);
  }
}

@keyframes ping {
  75%, 100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

@keyframes heroSceneFloat {
  0%,100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes orbitRotateOne {
  from {
    transform: rotateX(70deg) rotateZ(-25deg);
  }
  to {
    transform: rotateX(70deg) rotateZ(335deg);
  }
}

@keyframes orbitRotateTwo {
  from {
    transform: rotateX(64deg) rotateZ(40deg);
  }
  to {
    transform: rotateX(64deg) rotateZ(-320deg);
  }
}

@keyframes logoFloat {
  0%,100% {
    transform: translateY(0) rotateY(0deg);
  }
  50% {
    transform: translateY(-10px) rotateY(4deg);
  }
}

@keyframes logoRotate {
  0%,100% {
    transform: translateZ(0) rotate(0deg);
  }
  50% {
    transform: translateZ(8px) rotate(2deg);
  }
}

@keyframes logoGlow {
  0%,100% {
    opacity: .65;
    transform: scale(.95);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes cardApiFloat {
  0%,100% {
    transform: translate(0,0);
  }
  50% {
    transform: translate(8px,-10px);
  }
}

@keyframes cardMetaFloat {
  0%,100% {
    transform: translate(0,0);
  }
  50% {
    transform: translate(-7px,-8px);
  }
}

@keyframes cardAiFloat {
  0%,100% {
    transform: translate(0,0);
  }
  50% {
    transform: translate(-8px,10px);
  }
}

/* ================================
Responsive - Large laptop
================================ */
@media (max-width:1280px) {
  .feature-grid {
    grid-template-columns: repeat(2,1fr);
  }
  .nav-link {
    padding: 8px 14px;
  }
  .nav-list {
    padding-left: 20px;
  }
}

/* ================================
Responsive - Tablet
================================ */
@media (max-width:1024px) {
  :root {
    --gutter: 24px;
    --section-pad: 45px;
    --head-gap: 32px;
    --block-gap: 45px;
  }
  .header-inner {
    padding-block: 14px;
  }
  .nav-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
  }
  .nav-toggle span {
    width: 24px;
    height: 2px;
    background: var(--ink);
    transition: .25s;
  }
  .nav-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav-toggle.active span:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    padding: 12px 16px 20px;
    box-shadow: 0 16px 30px rgba(0,0,0,.1);
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transition: .25s;
  }
  .main-nav.open {
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    visibility: visible;
    opacity: 1;
  }
  .nav-list {
    flex-direction: column;
    padding: 0;
    margin: 0;
    gap: 10px;
  }
  .nav-link {
    width: 100%;
    justify-content: space-between;
    border-radius: 50px;
    border: 2px solid #f6f6f6;
  }
  .mega-menu, .mega-features, .mega-integrations {
    position: static;
    width: 100%;
    box-shadow: none;
    border: 0;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav-item.open .mega-menu {
    display: grid;
  }
  .nav-actions {
    justify-content: center;
    margin-top: 12px;
  }
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-top: 40px;
    padding-bottom: 48px;
  }
  .hero-lead {
    max-width: 600px;
  }
  .hero-scene {
    width: min(100%,460px);
  }
  .trust-grid {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
  .ent-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-top {
    grid-template-columns: 1fr 1fr;
  }
  .footer-links {
    grid-column: 1/-1;
  }
}

/* ================================
Responsive - Mobile
================================ */
@media (max-width:700px) {
  :root {
    --gutter: 16px;
    --section-pad: 40px;
    --head-gap: 28px;
    --block-gap: 40px;
  }
  .section-head {
    margin-bottom: 36px;
  }
  .brand-logo {
    /* width: 42px; */
  }
  .brand-logo-nav{
    width:200px;
    height: auto;
  }
  .brand-text strong {
    font-size: 16px;
  }
  .hero-inner {
    gap: 32px;
    padding-top: 32px;
    padding-bottom: 40px;
  }
  .hero h1 {
    margin-top: 20px;
  }
  .hero-lead {
    margin-top: 16px;
  }
  .hero-cta {
    margin-top: 24px;
  }
  .hero-proof {
    gap: 16px 24px;
    margin-top: 28px;
  }
  .hero-scene {
    width: min(100%,380px);
  }
  .hc-pill {
    padding: 6px 11px;
  }
  .hc-title {
    font-size: 11px;
  }
  .hc-sub {
    font-size: 9.5px;
  }
  .hero-card-api {
    right: 0;
  }
  .hero-card-meta {
    left: 0;
  }
  .hero-card-ai {
    left: 0;
  }
  .feature-grid, .ent-grid {
    grid-template-columns: 1fr;
  }
  .ent-card {
    padding: 28px 22px;
  }
  .stats {
    grid-template-columns: 1fr 1fr;
  }
  .stat {
    padding: 24px 10px;
  }
  .stat:nth-child(2) {
    border-right: 0;
  }
  .stat:nth-child(-n+2) {
    border-bottom: 1px solid var(--line);
  }
  .stat span {
    font-size: 14px;
  }
  .trust-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px;
  }
  .trust-card {
    min-height: 140px;
    padding: 20px 12px;
  }
  .trust-card:last-child {
    grid-column: 1/-1;
  }
  .trust-logo {
    height: 48px;
  }
  .trust-name {
    font-size: 14px;
  }
  .mega-features, .mega-integrations {
    grid-template-columns: 1fr;
  }
  .mega-link:nth-child(odd) {
    border-right: 0;
  }
  .site-footer {
    padding-top: 0px;
  }
  .footer-top {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .footer-links {
    grid-template-columns: 1fr 1fr;
  }
  .footer-links {
    grid-template-columns: 1fr 1fr;
  }
  .footer-links nav:nth-child(3) {
    grid-column: 1 / -1;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 0px;
    padding-top: 28px;
  }
}

/* ================================
Responsive - Small Mobile
================================ */
@media (max-width:380px) {
  :root {
    --gutter: 12px;
  }
  .btn-primary, .btn-outline {
    width: 100%;
  }
  .footer-links {
    grid-template-columns: 1fr;
  }
  .hero-card-meta {
    display: none;
  }
  .nav-actions {
    flex-wrap: wrap;
    gap: 12px;
  }
}

@media (prefers-reduced-motion:reduce) {
  * {
    animation: none!important;
    transition: none!important;
  }
}

/* ================================
Scroll Reveal (WOW.js-style)
Classes/attributes are added by script.js
================================ */
:root {
  --anim-shift: 40px;
}

[data-anim] {
  opacity: 0;
  will-change: opacity, transform;
}

[data-anim].is-visible {
  opacity: 1;
  animation-duration: var(--anim-dur, .8s);
  animation-delay: var(--anim-delay, 0s);
  animation-timing-function: cubic-bezier(.22,.61,.36,1);
  animation-fill-mode: backwards;
}

[data-anim="fadeIn"].is-visible {
  animation-name: revealFadeIn;
}

[data-anim="fadeInUp"].is-visible {
  animation-name: revealFadeInUp;
}

[data-anim="fadeInDown"].is-visible {
  animation-name: revealFadeInDown;
}

[data-anim="fadeInLeft"].is-visible {
  animation-name: revealFadeInLeft;
}

[data-anim="fadeInRight"].is-visible {
  animation-name: revealFadeInRight;
}

[data-anim="zoomIn"].is-visible {
  animation-name: revealZoomIn;
}

@keyframes revealFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes revealFadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0,var(--anim-shift),0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes revealFadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0,calc(var(--anim-shift) * -1),0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes revealFadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(calc(var(--anim-shift) * -1),0,0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes revealFadeInRight {
  from {
    opacity: 0;
    transform: translate3d(var(--anim-shift),0,0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes revealZoomIn {
  from {
    opacity: 0;
    transform: scale(.85);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width:700px) {
  :root {
    --anim-shift: 24px;
  }
}

/* ================================
Feature & Integration pages
(features/*.html, integrations/*.html)
================================ */
.fx-page {
  background: #fafafa;
}

.fx-main {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  background: #fafafa;
}

:where(.fx-main) [id] {
  scroll-margin-top: 96px;
}

:where(.fx-main) :is(h1,h2,h3) {
  overflow-wrap: anywhere;
}

:where(.fx-main) :is(img,video) {
  max-width: 100%;
}

:where(.fx-main) a {
  text-decoration: none;
}

:where(.fx-main) ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

:where(.fx-main) code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  background: #f3f4f6;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: .9em;
  overflow-wrap: anywhere;
}

/* inline SVG icons */
.fx-icon {
  flex-shrink: 0;
}

/* alternating text / media rows */
.fx-section {
  position: relative;
  padding: 48px var(--gutter) var(--section-pad);
}

.fx-split {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  margin-bottom: 60px;
}

.fx-split > * {
  max-width: 100%;
}

/* hot-linked images that fail to load */
.fx-main img.is-broken {
  visibility: hidden;
}

/* MCP client tabs + copy buttons (state driven by script.js) */
.fx-main [data-tab] {
  font-family: inherit;
}

.fx-main button[data-tab][aria-pressed="true"] {
  background: #f0fdf4;
  color: #16a34a;
  border-color: #bbf7d0;
}

.fx-main button[data-tab][aria-pressed="false"] {
  background: transparent;
  color: #6b7280;
  border-color: transparent;
}

.fx-main button[data-tab]:hover {
  color: #16a34a;
}

.fx-main [data-copy] {
  font-family: inherit;
}

.fx-main [data-copy] {
  flex-shrink: 0;
  white-space: nowrap;
}

.fx-main [data-copy].is-copied {
  background: #dcfce7;
  color: #166534;
}

.fx-main a:focus-visible, .fx-main button:focus-visible {
  outline: 2px solid #10b981;
  outline-offset: 3px;
}

.sr-copy {
  position: fixed;
  left: -9999px;
  top: 0;
  opacity: 0;
}

.fx-tab-note {
  font-size: 15px;
  color: #4b5563;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 32px;
}

.fx-tab-note[hidden], [hidden] {
  display: none !important;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

@media (min-width: 768px) {
  .fx-section {
    padding: 60px var(--gutter) var(--section-pad);
  }
  .fx-split {
    flex-direction: row;
    gap: 8%;
    margin-bottom: 120px;
  }
  .fx-split--rev {
    flex-direction: row-reverse;
  }
  .fx-split > * {
    min-width: 0;
  }
}

@media (max-width: 600px) {
  :where(.fx-main) :has(> [data-copy]) {
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fx-main * {
    animation: none !important;
    transition: none !important;
  }
}

/* --- generated per-element rules (converted from the reference pages) --- */
/* --- features/ai-assistant.html --- */
.fx-b-1 {
  min-height: 100vh;
  background: #FAFAFA;
  overflow-x: hidden;
}

.fx-section-2 {
  padding: var(--section-pad) var(--gutter) 40px;
  text-align: center;
  background: #F5F7F5;
  position: relative;
  overflow: hidden;
}

.fx-b-3 {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
}

.fx-b-4 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #54656F;
  margin-bottom: 24px;
  font-weight: 500;
}

.fx-a-5 {
  color: #54656F;
  text-decoration: none;
  transition: color 0.2s;
}

.fx-span-6 {
  color: #0A1628;
}

.fx-b-7 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid #E4EAE4;
  font-size: 12px;
  font-weight: 700;
  color: #54656F;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.fx-h1-8 {
  font-size: clamp(38px, 5vw, 44px);
  font-weight: 800;
  color: #0A1628;
  letter-spacing: -0.04em;
  line-height: 1.1;
  margin-bottom: 20px;
}

.fx-p-9 {
  font-size: 18px;
  color: #54656F;
  line-height: 1.6;
  /* max-width: 600px; */
  margin: 0 auto;
  margin-bottom: 20px;
}

.fx-b-10 {
  position: absolute;
  top: 100px;
  left: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(16,185,129,0.03) 0%, rgba(250,250,250,0) 70%);
  border-radius: 50%;
  z-index: 0;
}

.fx-b-11 {
  position: absolute;
  top: 800px;
  right: -200px;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(59,130,246,0.02) 0%, rgba(250,250,250,0) 70%);
  border-radius: 50%;
  z-index: 0;
}

.fx-b-12 {
  max-width: calc(var(--max) - 2 * var(--gutter));
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.fx-b-13 {
  position: absolute;
  top: -60px;
  left: -40px;
  font-size: clamp(110px, 38vw, 280px);
  font-weight: 900;
  color: rgba(243, 244, 246, 0.6);
  z-index: 0;
  pointer-events: none;
  line-height: 1;
  letter-spacing: -0.05em;
}

.fx-b-14 {
  flex: 1 1 400px;
  z-index: 1;
  position: relative;
}

.fx-b-15 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
  border: 1px solid #BBF7D0;
  color: #16A34A;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(22, 163, 74, 0.1);
}

.fx-span-16 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16A34A;
  box-shadow: 0 0 0 2px rgba(22,163,74,0.2);
}

.fx-h2-17 {
  font-size: clamp(25px, calc(25px + (15) * ((100vw - 320px) / 1100)), 40px);
  font-weight: 800;
  color: #111827;
  margin-bottom: 20px;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.fx-p-18 {
  font-size: 18px;
  color: #4B5563;
  line-height: 1.7;
  margin-bottom: 32px;
}

.fx-ul-19 {
  list-style: none;
  padding: 0;
  margin: 0 0 40px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fx-li-20 {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-size: 16px;
  color: #374151;
  font-weight: 500;
}

.fx-b-21 {
  background: #10B981;
  color: #fff;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}

.fx-span-22 {
  padding-top: 3px;
  line-height: 1.5;
}

.fx-a-23 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #fff;
  padding: 16px 32px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  box-shadow: 0 10px 20px -5px rgba(16, 185, 129, 0.4), 0 4px 6px -2px rgba(16, 185, 129, 0.1);
}

.fx-a-23:hover {
  transform: translateY(-2px);
}

.fx-b-24 {
  flex: 1 1 450px;
  width: 100%;
  z-index: 1;
}

.fx-b-25 {
  width: 100%;
  aspect-ratio: 16/10;
  background: #fff;
  border-radius: 24px;
  padding: 8px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(229, 231, 235, 1);
  position: relative;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.fx-b-26 {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  background: linear-gradient(180deg, #F3F4F6 0%, #E5E7EB 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.fx-img-27 {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.fx-b-28 {
  /* margin-top: 40px; */
  border-top: 1px solid rgba(229,231,235,0.8);
  padding-top: 60px;
}

.fx-b-29 {
  text-align: center;
  margin-bottom: 60px;
}

.fx-h2-30 {
  font-size: clamp(24px, calc(24px + (12) * ((100vw - 320px) / 1100)), 36px);
  font-weight: 800;
  color: #111827;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

.fx-span-31 {
  color: #10B981;
  /* display:flex; */
}

.fx-p-32 {
  font-size: 18px;
  color: #6B7280;
}

.fx-b-33 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.fx-b-3-3 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.fx-b-34 {
  background: #EBF5FF;
  padding: 40px 32px;
  border-radius: 16px;
  border: 1px solid #BFDBFE;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: default;
}

.fx-b-34:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -12px rgba(0,128,105,.18);
}

.fx-b-35 {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  color: #3B82F6;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.fx-h3-36 {
  font-size: 20px;
  font-weight: 700;
  color: #1E3A8A;
  margin: 0 0 16px 0;
}

.fx-p-37 {
  margin: 0;
  color: #2563EB;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 500;
  flex: 1;
}

.fx-b-38 {
  margin-top: 32px;
  width: 100%;
  background: #2563EB;
  color: #fff;
  padding: 12px 0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.fx-b-39 {
  background: #F0FDF4;
  padding: 40px 32px;
  border-radius: 16px;
  border: 1px solid #BBF7D0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: default;
}

.fx-b-39:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -12px rgba(0,128,105,.18);
}

.fx-b-40 {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  color: #10B981;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.fx-h3-41 {
  font-size: 20px;
  font-weight: 700;
  color: #064E3B;
  margin: 0 0 16px 0;
}

.fx-p-42 {
  margin: 0;
  color: #16A34A;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 500;
  flex: 1;
}

.fx-b-43 {
  margin-top: 32px;
  width: 100%;
  background: #10B981;
  color: #fff;
  padding: 12px 0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.fx-b-44 {
  background: #FAF5FF;
  padding: 40px 32px;
  border-radius: 16px;
  border: 1px solid #E9D5FF;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: default;
}

.fx-b-44:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -12px rgba(0,128,105,.18);
}

.fx-b-45 {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  color: #A855F7;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.fx-h3-46 {
  font-size: 20px;
  font-weight: 700;
  color: #4C1D95;
  margin: 0 0 16px 0;
}

.fx-p-47 {
  margin: 0;
  color: #9333EA;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 500;
  flex: 1;
}

.fx-b-48 {
  margin-top: 32px;
  width: 100%;
  background: #9333EA;
  color: #fff;
  padding: 12px 0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.fx-b-49 {
  margin-top: 100px;
  border-top: 1px solid rgba(229,231,235,0.8);
  padding-top: 100px;
  padding-bottom: 60px;
}

.fx-p-50 {
  margin: 0;
  color: #2563EB;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 500;
}

.fx-p-51 {
  margin: 0;
  color: #16A34A;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 500;
}

.fx-p-52 {
  margin: 0;
  color: #9333EA;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 500;
}

/* --- features/analytics.html --- */
.fx-b-53 {
  padding: 40px var(--gutter) var(--section-pad);
  position: relative;
}

.fx-b-54 {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 100px;
  aspect-ratio: 16/9;
  background: #fff;
  border-radius: 24px;
  padding: 12px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(229, 231, 235, 1);
  position: relative;
}

.fx-b-55 {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  background: linear-gradient(180deg, #F8FAFC 0%, #E2E8F0 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.fx-img-56 {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.fx-b-57 {
  text-align: center;
  margin-bottom: 100px;
  max-width: 800px;
  margin: 0 auto 100px;
}

.fx-h2-58 {
  font-size: clamp(29px, calc(29px + (17) * ((100vw - 320px) / 1100)), 46px);
  font-weight: 800;
  color: #111827;
  margin-bottom: 20px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.fx-p-59 {
  font-size: 20px;
  color: #6B7280;
  line-height: 1.6;
}

.fx-b-60 {
  margin-bottom: 120px;
}

.fx-b-61 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 32px;
}

.fx-b-62 {
  background: #fff;
  border-radius: 24px;
  padding: 40px;
  border: 1px solid rgba(229, 231, 235, 0.8);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: default;
}

.fx-b-63 {
  position: absolute;
  top: -50px;
  right: -50px;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, rgba(16,185,129,0.1) 0%, rgba(255,255,255,0) 70%);
  border-radius: 50%;
  z-index: 0;
}

.fx-b-64 {
  position: relative;
  z-index: 1;
  flex: 1;
}

.fx-b-65 {
  display: inline-block;
  background: #DCFCE7;
  color: #16A34A;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 24px;
  border: 1px solid #BBF7D0;
}

.fx-h3-66 {
  font-size: 24px;
  font-weight: 800;
  color: #111827;
  margin-bottom: 12px;
}

.fx-p-67 {
  color: #6B7280;
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 32px;
}

.fx-b-68 {
  height: 1px;
  background: #E5E7EB;
  margin-bottom: 32px;
}

.fx-ul-69 {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fx-li-70 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  color: #374151;
  font-weight: 500;
}

.fx-b-71 {
  background: #F0FDF4;
  color: #10B981;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  border: 1px solid #BBF7D0;
}

.fx-span-72 {
  line-height: 1.5;
}

.fx-b-73 {
  margin-top: 40px;
  border-top: 1px solid rgba(229,231,235,0.8);
  padding-top: 100px;
  margin-bottom: 100px;
}

.fx-b-74 {
  background: #fff;
  padding: 32px;
  border-radius: 20px;
  border: 1px solid rgba(229, 231, 235, 0.5);
  box-shadow: 0 4px 12px rgba(0,0,0,0.02);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
}

.fx-b-74:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -12px rgba(0,128,105,.18);
}

.fx-b-75 {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #F0FDF4;
  color: #16A34A;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.fx-h3-76 {
  font-size: 19px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 12px 0;
}

.fx-p-77 {
  margin: 0;
  color: #6B7280;
  font-size: 18px;
  line-height: 1.6;
}

.fx-b-78 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 24px;
}

.fx-b-79 {
  background: #fff;
  padding: 32px;
  border-radius: 20px;
  border: 1px solid rgba(229, 231, 235, 0.5);
  position: relative;
  overflow: hidden;
}

.fx-b-80 {
  position: absolute;
  top: -15px;
  right: -15px;
  width: 80px;
  height: 80px;
  background: #F0FDF4;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #16A34A;
  font-size: clamp(24px, calc(24px + (8) * ((100vw - 320px) / 1100)), 32px);
  font-weight: 800;
}

.fx-span-81 {
  position: relative;
  top: 5px;
  right: 5px;
}

.fx-h3-82 {
  font-size: 19px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 12px 0;
  position: relative;
  z-index: 1;
}

.fx-p-83 {
  margin: 0 0 16px 0;
  color: #6B7280;
  font-size: 18px;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

.fx-ul-84 {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fx-li-85 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #4B5563;
  margin-bottom: 6px;
}

/* --- features/bulk-messaging.html --- */
.fx-b-86 {
  position: absolute;
  top: 600px;
  right: -200px;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(59,130,246,0.02) 0%, rgba(250,250,250,0) 70%);
  border-radius: 50%;
  z-index: 0;
}

.fx-b-87 {
  position: absolute;
  top: -60px;
  right: -40px;
  font-size: clamp(110px, 38vw, 280px);
  font-weight: 900;
  color: rgba(243, 244, 246, 0.6);
  z-index: 0;
  pointer-events: none;
  line-height: 1;
  letter-spacing: -0.05em;
}

.fx-b-88 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 24px;
}

/* --- features/drip-campaign.html --- */
.fx-b-89 {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 32px;
}

.fx-a-90 {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #fff;
  padding: 14px 28px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.fx-a-90:hover {
  transform: translateY(-2px);
}

.fx-a-91 {
  background: #fff;
  color: #111827;
  border: 1px solid #E5E7EB;
  padding: 14px 28px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s, background 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.fx-a-91:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -12px rgba(0,128,105,.18);
}

.fx-section-92 {
  padding: var(--section-pad) var(--gutter);
  background: #fff;
}

.fx-b-93 {
  max-width: calc(var(--max) - 2 * var(--gutter));
  margin: 0 auto;
  text-align: center;
}

.fx-p-94 {
  font-size: 18px;
  color: #6B7280;
  margin-bottom: 60px;
  max-width: 600px;
  margin: 0 auto 60px;
}

.fx-b-95 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 32px;
}

.fx-b-96 {
  background: #F9FAFB;
  padding: 40px;
  border-radius: 24px;
  border: 1px solid #E5E7EB;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.fx-b-97 {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: #F0FDF4;
  color: #10B981;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.fx-h3-98 {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 12px;
}

.fx-p-99 {
  font-size: 18px;
  color: #4B5563;
  line-height: 1.6;
}

.fx-section-100 {
  padding: var(--section-pad) var(--gutter);
  background: #FAFAFA;
}

.fx-b-101 {
  max-width: calc(var(--max) - 2 * var(--gutter));
  margin: 0 auto;
}

.fx-b-102 {
  text-align: center;
  margin-bottom: 80px;
}

.fx-b-103 {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.fx-b-104 {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
  background: #fff;
  padding: 40px;
  border-radius: 24px;
  border: 1px solid #E5E7EB;
}

.fx-b-105 {
  flex: 1 1 400px;
}

.fx-b-106 {
  color: #10B981;
  font-weight: 800;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.fx-h3-107 {
  font-size: 28px;
  font-weight: 800;
  color: #111827;
  margin-bottom: 16px;
}

.fx-p-108 {
  font-size: 18px;
  color: #4B5563;
  line-height: 1.6;
  margin-bottom: 24px;
}

.fx-ul-109 {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fx-li-110 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: #374151;
}

.fx-b-111 {
  flex: 1 1 400px;
  background: #F9FAFB;
  padding: 24px;
  border-radius: 16px;
  border: 1px solid #E5E7EB;
}

.fx-b-112 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fx-b-113 {
  display: flex;
  gap: 12px;
  align-items: center;
  background: #fff;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid #E5E7EB;
}

.fx-b-114 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #10B981;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.fx-b-115 {
  font-size: 12px;
  color: #6B7280;
  font-weight: 600;
}

.fx-b-116 {
  font-size: 14px;
  color: #111827;
  font-weight: 500;
}

.fx-b-117 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #F3F4F6;
  color: #4B5563;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.fx-b-118 {
  display: flex;
  flex-wrap: wrap-reverse;
  gap: 40px;
  align-items: center;
  background: #fff;
  padding: 40px;
  border-radius: 24px;
  border: 1px solid #E5E7EB;
}

.fx-b-119 {
  flex: 1 1 400px;
  background: #F9FAFB;
  padding: 32px;
  border-radius: 16px;
  border: 1px solid #E5E7EB;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fx-b-120 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #E5E7EB;
}

.fx-span-121 {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

.fx-span-122 {
  font-size: 14px;
  font-weight: 700;
  color: #10B981;
  background: #F0FDF4;
  padding: 4px 8px;
  border-radius: 6px;
}

.fx-b-123 {
  margin-bottom: 16px;
}

.fx-b-124 {
  font-size: 12px;
  font-weight: 700;
  color: #6B7280;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.fx-b-125 {
  background: #fff;
  padding: 12px;
  border-radius: 8px;
  border: 1px dashed #D1D5DB;
  font-size: 14px;
  color: #374151;
  font-family: monospace;
  overflow-wrap: anywhere;
  max-width: 100%;
}

.fx-b-126 {
  margin-bottom: 24px;
}

.fx-b-127 {
  font-size: 12px;
  font-weight: 700;
  color: #10B981;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.fx-b-128 {
  background: #DCFCE7;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #BBF7D0;
  font-size: 14px;
  color: #065F46;
  font-weight: 500;
}

.fx-b-129 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fx-span-130 {
  background: #E5E7EB;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-family: monospace;
  color: #374151;
  overflow-wrap: anywhere;
  max-width: 100%;
}

.fx-b-131 {
  flex: 1 1 400px;
  background: #F9FAFB;
  padding: 24px;
  border-radius: 16px;
  border: 1px solid #E5E7EB;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.fx-b-132 {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid #E5E7EB;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fx-b-133 {
  font-size: 12px;
  color: #6B7280;
  font-weight: 600;
  text-transform: uppercase;
}

.fx-b-134 {
  font-size: 24px;
  font-weight: 800;
  color: #111827;
}

.fx-b-135 {
  display: flex;
  gap: 16px;
}

.fx-b-136 {
  flex: 1;
  background: #fff;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid #E5E7EB;
}

.fx-b-137 {
  font-size: 20px;
  font-weight: 800;
  color: #10B981;
  margin-bottom: 4px;
}

.fx-b-138 {
  font-size: 20px;
  font-weight: 800;
  color: #3B82F6;
  margin-bottom: 4px;
}

.fx-section-139 {
  padding: var(--section-pad) var(--gutter);
  background: #fff;
  border-top: 1px solid #E5E7EB;
}

.fx-b-140 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 24px;
}
.fx-b-14-0 {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 24px;
}
.fx-b-141 {
  background: #FAFAFA;
  padding: 32px;
  border-radius: 20px;
  border: 1px solid #E5E7EB;
  display: flex;
  flex-direction: column;
}

.fx-b-142 {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #F0FDF4;
  color: #10B981;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.fx-p-143 {
  font-size: 18px;
  color: #4B5563;
  line-height: 1.6;
  margin-bottom: 24px;
  flex: 1;
}

.fx-b-144 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #10B981;
  background: #DCFCE7;
  padding: 8px 12px;
  border-radius: 8px;
  width: fit-content;
}

.fx-section-145 {
  padding: var(--section-pad) var(--gutter);
  background: #FAFAFA;
}

.fx-b-146 {
  max-width: calc(var(--max) - 2 * var(--gutter));
  margin: 0 auto;
}

.fx-b-147 {
  position: relative;
  padding-left: 40px;
}

.fx-b-148 {
  position: absolute;
  left: 19px;
  top: 20px;
  bottom: 20px;
  width: 2px;
  background: #E5E7EB;
}

.fx-b-149 {
  position: relative;
  margin-bottom: 40px;
  padding-left: 20px;
}

.fx-b-150 {
  position: absolute;
  left: -26px;
  top: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #10B981;
  border: 3px solid #FAFAFA;
  box-shadow: 0 0 0 1px #E5E7EB;
}

.fx-b-151 {
  background: #fff;
  padding: 24px;
  border-radius: 16px;
  border: 1px solid #E5E7EB;
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
  position: relative;
}

.fx-b-152 {
  position: absolute;
  left: -6px;
  top: 2px;
  width: 10px;
  height: 10px;
  background: #fff;
  border-left: 1px solid #E5E7EB;
  border-bottom: 1px solid #E5E7EB;
  transform: rotate(45deg);
}

.fx-b-153 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.fx-span-154 {
  font-size: 14px;
  font-weight: 700;
  color: #16A34A;
  background: #F0FDF4;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid #BBF7D0;
}

.fx-h3-155 {
  font-size: 18px;
  font-weight: 800;
  color: #111827;
  margin: 0;
}

.fx-b-156 {
  background: #F3F4F6;
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 16px;
}

.fx-p-157 {
  font-size: 18px;
  color: #374151;
  font-style: italic;
  margin: 0;
  line-height: 1.6;
}

.fx-b-158 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #6B7280;
  font-weight: 500;
}

.fx-p-159 {
  font-size: 18px;
  color: #6B7280;
  margin-bottom: 60px;
}

.fx-b-160 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 24px;
  text-align: left;
}

.fx-b-161 {
  background: #fff;
  padding: 24px;
  border-radius: 16px;
  border: 1px solid #E5E7EB;
  display: flex;
  gap: 16px;
}

.fx-b-162 {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #F0FDF4;
  color: #10B981;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fx-h4-163 {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 6px;
}

.fx-p-164 {
  font-size: 14px;
  color: #6B7280;
  line-height: 1.5;
  margin: 0;
}

/* --- features/e-commerce.html --- */
.fx-p-165 {
  font-size: 18px;
  color: #54656F;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
  margin-bottom: 32px;
}

.fx-b-166 {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.fx-a-167 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 12px;
  background: #0A1628;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}

.fx-a-167:hover {
  transform: translateY(-2px);
}

.fx-span-168 {
  margin-left: 6px;
}

.fx-a-169 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid #E4EAE4;
  color: #0A1628;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s;
}

.fx-b-170 {
  position: absolute;
  top: 1200px;
  right: -200px;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(59,130,246,0.02) 0%, rgba(250,250,250,0) 70%);
  border-radius: 50%;
  z-index: 0;
}

.fx-b-171 {
  max-width: calc(var(--max) - 2 * var(--gutter));
  margin: 60px auto 0;
  position: relative;
  z-index: 1;
}

.fx-ul-172 {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fx-b-173 {
  width: 100%;
  aspect-ratio: 16/10;
  background: #fff;
  border-radius: 24px;
  padding: 8px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(229, 231, 235, 1);
  position: relative;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.fx-b-173:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -12px rgba(0,128,105,.18);
}

.fx-b-174 {
  margin-top: 40px;
  border-top: 1px solid rgba(229,231,235,0.8);
  padding-top: 100px;
  margin-bottom: 40px;
}

.fx-p-175 {
  font-size: 18px;
  color: #6B7280;
  max-width: 800px;
  margin: 0 auto;
}

/* --- features/index.html --- */
.fx-b-176 {
  min-height: 100vh;
  background: #FAFAFA;
}

.fx-b-177 {
  padding: 0 var(--gutter) var(--section-pad);
}

.fx-b-178 {
  max-width: calc(var(--max) - 2 * var(--gutter));
  margin: 40px auto 0;
}

.fx-b-179 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 24px;
}

.fx-a-180 {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: #fff;
  padding: 24px;
  border-radius: 20px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.03), 0 1px 3px rgba(0,0,0,0.02);
  border: 1px solid rgba(229, 231, 235, 0.5);
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.fx-b-181 {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #EBF5FF;
  color: #3B82F6;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fx-b-182 {
  padding-top: 4px;
}

.fx-h3-183 {
  font-size: 17px;
  font-weight: 600;
  color: #111827;
  margin: 0 0 6px 0;
}

.fx-b-184 {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #FFEDD5;
  color: #EA580C;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fx-b-185 {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #DCFCE7;
  color: #16A34A;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fx-b-186 {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #CCFBF1;
  color: #0D9488;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fx-b-187 {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #F3E8FF;
  color: #9333EA;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fx-b-188 {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #FEF9C3;
  color: #CA8A04;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fx-b-189 {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #FEE2E2;
  color: #DC2626;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fx-b-190 {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #E0E7FF;
  color: #4F46E5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fx-b-191 {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #FCE7F3;
  color: #DB2777;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* --- features/re-targeting.html --- */
.fx-b-192 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
  border: 1px solid #BBF7D0;
  color: #16A34A;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 20px;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.fx-h2-193 {
  font-size: clamp(25px, calc(25px + (15) * ((100vw - 320px) / 1100)), 40px);
  font-weight: 800;
  color: #111827;
  margin-bottom: 20px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
}

.fx-p-194 {
  font-size: 18px;
  color: #4B5563;
  line-height: 1.7;
  margin-bottom: 32px;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.fx-li-195 {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-size: 16px;
  color: #374151;
  font-weight: 500;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.fx-b-196 {
  background: #10B981;
  color: #fff;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s;
}

.fx-b-197 {
  margin-top: 40px;
  border-top: 1px solid rgba(229,231,235,0.8);
  padding-top: 100px;
  margin-bottom: 120px;
}

.fx-p-198 {
  margin: 0;
  color: #6B7280;
  font-size: 18px;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

.fx-b-199 {
  text-align: center;
  margin-bottom: 80px;
  max-width: 800px;
  margin: 0 auto 80px;
}

.fx-b-200 {
  color: #9CA3AF;
}

.fx-p-201 {
  margin-top: 24px;
  color: #6B7280;
  font-size: 18px;
  font-weight: 500;
}

/* --- features/schedule-message.html --- */
.fx-b-202 {
  text-align: center;
  margin-bottom: 100px;
  max-width: 800px;
  margin: 100px auto;
}

.fx-b-203 {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 24px;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.fx-b-204 {
  background: #DCFCE7;
  color: #16A34A;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.fx-a-205 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px;
  border-radius: 12px;
  background: #F9FAFB;
  color: #111827;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid #E5E7EB;
  transition: all 0.3s ease;
  z-index: 1;
}

.fx-a-205:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -12px rgba(0,128,105,.18);
}

/* --- features/whatsapp-calling.html --- */
.fx-b-206 {
  margin-bottom: 100px;
  text-align: center;
}

.fx-h2-207 {
  font-size: clamp(24px, calc(24px + (12) * ((100vw - 320px) / 1100)), 36px);
  font-weight: 800;
  color: #111827;
  margin-bottom: 40px;
  letter-spacing: -0.02em;
}

.fx-b-208 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 24px;
}

.fx-b-209 {
  background: #fff;
  padding: 32px 24px;
  border-radius: 20px;
  border: 1px solid rgba(229, 231, 235, 0.5);
  box-shadow: 0 4px 12px rgba(0,0,0,0.02);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.fx-b-210 {
  font-size: clamp(30px, calc(30px + (18) * ((100vw - 320px) / 1100)), 48px);
  font-weight: 800;
  color: #10B981;
  margin-bottom: 8px;
  line-height: 1;
}

.fx-b-211 {
  font-size: 16px;
  color: #4B5563;
  font-weight: 500;
  line-height: 1.5;
}

.fx-b-212 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F0F4F8;
  padding: 32px;
}

.fx-b-213 {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
  border: 1px solid #E5E7EB;
}

.fx-b-214 {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.fx-b-215 {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #10B981;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
}

.fx-b-216 {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 2px;
}

.fx-b-217 {
  font-size: 14px;
  color: #6B7280;
}

.fx-b-218 {
  background: #F3F4F6;
  border-radius: 8px;
  padding: 16px;
  font-size: 15px;
  color: #374151;
  margin-bottom: 24px;
}

.fx-b-219 {
  width: 100%;
  background: #10B981;
  border-radius: 8px;
  padding: 14px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 4px 6px -1px rgba(16,185,129,0.2);
}

.fx-b-220 {
  background: #fff;
  border-radius: 16px;
  padding: 16px 16px 32px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1);
  border: 1px solid #E5E7EB;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fx-b-221 {
  width: 100%;
  background: linear-gradient(135deg, #D1FAE5 0%, #ECFDF5 100%);
  border-radius: 12px;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 28px;
}

.fx-b-222 {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #10B981;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-bottom: 24px;
  box-shadow: 0 8px 16px rgba(16,185,129,0.2);
}

.fx-b-223 {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 6px;
}

.fx-b-224 {
  font-size: 14px;
  color: #6B7280;
  font-weight: 500;
}

.fx-b-225 {
  display: flex;
  align-items: center;
  gap: 20px;
}

.fx-b-226 {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #E5E7EB;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #374151;
  cursor: pointer;
  transition: background 0.2s;
}

.fx-b-227 {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #EF4444;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(239,68,68,0.3);
  transition: transform 0.2s;
}

.fx-b-228 {
  background: #fff;
  border-radius: 12px;
  padding: 32px 24px;
  width: 100%;
  max-width: 450px;
  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1);
  border: 1px solid #E5E7EB;
}

.fx-h3-229 {
  font-size: 22px;
  font-weight: 800;
  color: #111827;
  margin: 0 0 32px 0;
}

.fx-b-230 {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.fx-b-231 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.fx-span-232 {
  font-size: 15px;
  color: #6B7280;
  font-weight: 500;
}

.fx-span-233 {
  font-size: 15px;
  color: #10B981;
  font-weight: 700;
}

.fx-b-234 {
  width: 100%;
  height: 8px;
  background: #E5E7EB;
  border-radius: 4px;
}

.fx-b-235 {
  width: 65%;
  height: 100%;
  background: #10B981;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(16,185,129,0.2);
}

.fx-b-236 {
  width: 92%;
  height: 100%;
  background: #10B981;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(16,185,129,0.2);
}

.fx-b-237 {
  width: 96%;
  height: 100%;
  background: #10B981;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(16,185,129,0.2);
}

.fx-b-238 {
  background: #fff;
  padding: 32px;
  border-radius: 20px;
  border: 1px solid rgba(229, 231, 235, 0.5);
  box-shadow: 0 4px 12px rgba(0,0,0,0.02);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
  display: flex;
  flex-direction: column;
}

.fx-b-238:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -12px rgba(0,128,105,.18);
}

.fx-p-239 {
  margin: 0;
  color: #6B7280;
  font-size: 18px;
  line-height: 1.6;
  flex-grow: 1;
  padding-bottom: 24px;
}

.fx-ul-240 {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid #E5E7EB;
  padding-top: 24px;
}

.fx-li-241 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: #4B5563;
  font-weight: 500;
}

.fx-b-242 {
  color: #10B981;
  flex-shrink: 0;
  padding-top: 2px;
}

/* --- features/whatsapp-forms.html --- */
.fx-b-243 {
  width: 100%;
  height: 100%;
  min-height: auto;
  border-radius: 16px;
  background: linear-gradient(180deg, #F3F4F6 0%, #E5E7EB 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.fx-b-244 {
  background: #fff;
  padding: 32px;
  border-radius: 20px;
  border: 1px solid rgba(229, 231, 235, 0.5);
  box-shadow: 0 4px 12px rgba(0,0,0,0.02);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

.fx-b-244:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -12px rgba(0,128,105,.18);
}

.fx-b-245 {
  position: absolute;
  top: 32px;
  right: 32px;
  padding: 4px 10px;
  background: #F3F4F6;
  color: #4B5563;
  font-size: 11px;
  font-weight: 700;
  border-radius: 100px;
  text-transform: uppercase;
}

.fx-b-246 {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  background: #fff;
  border-radius: 32px;
  padding: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(229, 231, 235, 1);
}

.fx-img-247 {
  width: 100%;
  height: auto;
  border-radius: 24px;
  display: block;
}

/* --- features/whatsapp-payments.html --- */
.fx-b-248 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.fx-b-249 {
  background: #fff;
  padding: 40px;
  border-radius: 24px;
  border: 1px solid rgba(229, 231, 235, 0.5);
  box-shadow: 0 4px 24px rgba(0,0,0,0.02);
}

.fx-h3-250 {
  font-size: 22px;
  font-weight: 700;
  color: #111827;
  margin: 0;
}

.fx-span-251 {
  padding: 4px 8px;
  background: #DCFCE7;
  color: #16A34A;
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
  text-transform: uppercase;
}

.fx-b-252 {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.fx-b-253 {
  padding: 8px 16px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #E5E7EB;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.fx-img-254 {
  height: 24px;
  object-fit: contain;
}

.fx-span-255 {
  padding: 4px 8px;
  background: #E0E7FF;
  color: #4F46E5;
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
  text-transform: uppercase;
}

.fx-span-256 {
  padding: 4px 8px;
  background: #F3E8FF;
  color: #9333EA;
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
  text-transform: uppercase;
}

.fx-b-257 {
  padding: 24px;
  background: #F0FDF4;
  border-radius: 16px;
  border: 1px solid #BBF7D0;
}

.fx-b-258 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #16A34A;
  font-weight: 600;
  margin-bottom: 16px;
}

.fx-b-259 {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #4B5563;
  margin-bottom: 8px;
}

.fx-b-260 {
  color: #111827;
}

.fx-b-261 {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #4B5563;
}

.fx-span-262 {
  color: #10B981;
  font-weight: 600;
}

.fx-span-263 {
  padding: 4px 8px;
  background: #FFEDD5;
  color: #EA580C;
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
  text-transform: uppercase;
}

.fx-b-264 {
  padding: 24px;
  background: #F9FAFB;
  border-radius: 16px;
  border: 1px solid #E5E7EB;
}

.fx-b-265 {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  height: 60px;
  margin-bottom: 20px;
}

.fx-b-266 {
  flex: 1;
  background: #10B981;
  height: 30%;
  border-radius: 4px 4px 0 0;
}

.fx-b-267 {
  flex: 1;
  background: #10B981;
  height: 50%;
  border-radius: 4px 4px 0 0;
}

.fx-b-268 {
  flex: 1;
  background: #10B981;
  height: 40%;
  border-radius: 4px 4px 0 0;
}

.fx-b-269 {
  flex: 1;
  background: #10B981;
  height: 80%;
  border-radius: 4px 4px 0 0;
}

.fx-b-270 {
  flex: 1;
  background: #10B981;
  height: 60%;
  border-radius: 4px 4px 0 0;
}

.fx-b-271 {
  flex: 1;
  background: #10B981;
  height: 90%;
  border-radius: 4px 4px 0 0;
}

.fx-b-272 {
  flex: 1;
  background: #10B981;
  height: 70%;
  border-radius: 4px 4px 0 0;
}

.fx-b-273 {
  display: flex;
  justify-content: space-between;
  text-align: center;
}

.fx-b-274 {
  font-size: 12px;
  color: #6B7280;
}

.fx-b-275 {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
}

.fx-b-276 {
  background: #fff;
  padding: 32px;
  border-radius: 20px;
  border: 1px solid rgba(229, 231, 235, 0.5);
  box-shadow: 0 4px 12px rgba(0,0,0,0.02);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.fx-b-276:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -12px rgba(0,128,105,.18);
}

.fx-b-277 {
  width: 100%;
  aspect-ratio: auto;
  background: #fff;
  border-radius: 24px;
  padding: 8px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(229, 231, 235, 1);
  position: relative;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.fx-b-277:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -12px rgba(0,128,105,.18);
}

.fx-b-278 {
  width: 100%;
  height: 100%;
  min-height: 300px;
  border-radius: 16px;
  background: linear-gradient(180deg, #F3F4F6 0%, #E5E7EB 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.fx-b-279 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 32px;
  width: 100%;
}

.fx-b-280 {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  font-weight: 700;
  color: #374151;
  border: 1px solid #F3F4F6;
}

.fx-img-281 {
  height: 32px;
  object-fit: contain;
}

/* --- integrations/apps.html --- */
.fx-b-282 {
  padding: 40px 24px 120px;
}

.fx-b-283 {
  max-width: calc(var(--max) - 2 * var(--gutter));
  margin: 0 auto;
}

.fx-h2-284 {
  font-size: 24px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 32px;
}

.fx-b-285 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 24px;
}

.fx-b-286 {
  background: #fff;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.03), 0 1px 3px rgba(0,0,0,0.02);
  border: 1px solid rgba(229, 231, 235, 0.6);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.fx-b-287 {
  position: relative;
  width: max-content;
  margin-bottom: 20px;
}

.fx-b-288 {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #FFE4E6;
  color: #E11D48;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fx-img-289 {
  object-fit: contain;
}

.fx-b-290 {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  background: #3B82F6;
  border-radius: 50%;
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.fx-b-291 {
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #3B82F6 inset, 0 0 0 3px #fff inset;
}

.fx-h3-292 {
  font-size: 17px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 8px 0;
}

.fx-p-293 {
  font-size: 14px;
  color: #6B7280;
  margin: 0;
  line-height: 1.5;
  flex: 1;
}

.fx-b-294 {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #DBEAFE;
  color: #2563EB;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fx-b-295 {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #D1FAE5;
  color: #059669;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fx-b-296 {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #E0E7FF;
  color: #4F46E5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fx-img-297 {
  object-fit: cover;
  border-radius: 8px;
}

.fx-b-298 {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #F1F5F9;
  color: #0F172A;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fx-img-299 {
  object-fit: cover;
  border-radius: 50%;
}

.fx-b-300 {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #FAE8FF;
  color: #C026D3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fx-img-301 {
  object-fit: contain;
  border-radius: 8px;
}

.fx-b-302 {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #DCFCE7;
  color: #16A34A;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fx-img-303 {
  object-fit: contain;
  border-radius: 50%;
}

.fx-b-304 {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #DBEAFE;
  color: #3B82F6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fx-b-305 {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #FFEDD5;
  color: #EA580C;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fx-b-306 {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #FEF3C7;
  color: #D97706;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- integrations/index.html --- */
.fx-b-307 {
  max-width: 800px;
  margin: 40px auto 0;
}

.fx-b-308 {
  background: #fff;
  border: 1px solid rgba(229, 231, 235, 1);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.03);
}

.fx-b-309 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  background: rgba(243, 244, 246, 1);
  gap: 1px;
}

.fx-a-310 {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: #fff;
  padding: 32px 32px;
  text-decoration: none;
  transition: background 0.2s;
}

.fx-b-311 {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #F0FDF4;
  color: #16A34A;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fx-h3-312 {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 6px 0;
}

.fx-p-313 {
  font-size: 13.5px;
  color: #6B7280;
  margin: 0;
  line-height: 1.5;
}

.fx-b-314 {
  background: #F9FAFB;
  padding: 18px 32px;
  border-top: 1px solid rgba(243, 244, 246, 1);
}

.fx-a-315 {
  color: #10B981;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.fx-span-316 {
  font-size: 16px;
  transition: transform 0.2s;
}

/* --- integrations/llms.html --- */
.fx-b-317 {
  width: 100%;
  aspect-ratio: 16/9;
  background: #fff;
  border-radius: 24px;
  padding: 8px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(229, 231, 235, 1);
  position: relative;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.fx-b-317:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -12px rgba(0,128,105,.18);
}

.fx-img-318 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

/* --- integrations/mcp.html --- */
.fx-b-319 {
  background: #ffffff;
  border-radius: 12px;
  padding: 24px 32px;
  color: #374151;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
  border: 1px solid #E5E7EB;
  overflow-wrap: anywhere;
  max-width: 100%;
}

.fx-b-320 {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  border-bottom: 1px solid #E5E7EB;
  padding-bottom: 16px;
  align-items: center;
}

.fx-b-321 {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #EF4444;
}

.fx-b-322 {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #F59E0B;
}

.fx-b-323 {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #10B981;
}

.fx-span-324 {
  margin-left: 12px;
  font-size: 13px;
  color: #6B7280;
  font-weight: 500;
}

.fx-b-325 {
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-size: 14px;
}

.fx-b-326 {
  background: #F3F4F6;
  padding: 12px 16px;
  border-radius: 6px;
}

.fx-span-327 {
  color: #2563EB;
  font-weight: 500;
}

.fx-span-328 {
  margin-left: 8px;
  color: #1F2937;
}

.fx-span-329 {
  color: #1F2937;
  font-weight: 500;
}

.fx-span-330 {
  margin-left: 8px;
  color: #374151;
}

.fx-b-331 {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #6B7280;
  font-size: 13px;
}

.fx-b-332 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 24px;
  margin-bottom: 100px;
}

.fx-b-333 {
  background: #fff;
  padding: 32px;
  border-radius: 20px;
  border: 1px solid rgba(229, 231, 235, 0.5);
  box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}

.fx-h3-334 {
  font-size: 28px;
  font-weight: 800;
  color: #111827;
  margin-bottom: 16px;
  text-align: center;
}

.fx-p-335 {
  font-size: 18px;
  color: #4B5563;
  line-height: 1.6;
  text-align: center;
  max-width: 800px;
  margin: 0 auto 40px;
}

.fx-b-336 {
  background: #FEF2F2;
  border: 1px solid #FCA5A5;
  padding: 32px;
  border-radius: 24px;
}

.fx-h4-337 {
  font-size: 20px;
  font-weight: 700;
  color: #991B1B;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.fx-li-338 {
  color: #7F1D1D;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
}

.fx-b-339 {
  background: #F0FDF4;
  border: 1px solid #86EFAC;
  padding: 32px;
  border-radius: 24px;
}

.fx-h4-340 {
  font-size: 20px;
  font-weight: 700;
  color: #166534;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.fx-b-341 {
  background: #16A34A;
  color: #fff;
  border-radius: 50%;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;

}

.fx-li-342 {
  color: #14532D;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 500;
}

.fx-span-343 {
  color: #16A34A;
}

.fx-b-344 {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.fx-h3-345 {
  font-size: clamp(24px, calc(24px + (8) * ((100vw - 320px) / 1100)), 32px);
  font-weight: 800;
  color: #111827;
  margin-bottom: 16px;
}

.fx-p-346 {
  font-size: 18px;
  color: #4B5563;
  line-height: 1.6;
  margin-bottom: 32px;
}

.fx-b-347 {
  background: #FFFBEB;
  border: 1px solid #FCD34D;
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 32px;
  font-size: 14.5px;
  color: #92400E;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.fx-span-348 {
  font-size: 20px;
}

.fx-b-349 {
  display: grid;
  grid-template-columns:repeat(4,1fr);
  gap: 8px;
  margin-bottom: 32px;
  border-bottom: 1px solid #E5E7EB;
  padding-bottom: 16px;
}

.fx-button-350 {
  background: #F0FDF4;
  color: #16A34A;
  border: 1px solid #BBF7D0;
  padding: 8px 16px;
  border-radius: 100px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.fx-button-351 {
  background: transparent;
  color: #6B7280;
  border: 1px solid transparent;
  padding: 8px 16px;
  border-radius: 100px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.fx-h4-352 {
  font-size: 22px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 24px;
}

.fx-b-353 {
  margin-bottom: 32px;
}

.fx-h5-354 {
  font-size: 17px;
  font-weight: 700;
  color: #374151;
  margin-bottom: 12px;
}

.fx-p-355 {
  color: #4B5563;
  font-size: 18px;
  margin-bottom: 12px;
}

.fx-b-356 {
  background: #F3F4F6;
  color: #1F2937;
  padding: 16px;
  border-radius: 12px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border: 1px solid #E5E7EB;
  overflow-wrap: anywhere;
  max-width: 100%;
}

.fx-span-357 {
  color: #6B7280;
}

.fx-b-358 {
  background: #F3F4F6;
  color: #1F2937;
  padding: 16px;
  border-radius: 12px;
  font-family: monospace;
  font-size: 13px;
  white-space: pre-wrap;
  border: 1px solid #E5E7EB;
  overflow-wrap: anywhere;
  max-width: 100%;
}

.fx-b-359 {
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 16px;
}

.fx-b-360 {
  display: block;
  font-size: 15px;
  color: #111827;
  margin-bottom: 8px;
}

.fx-ul-361 {
  color: #4B5563;
  font-size: 14px;
  margin: 0;
  padding-left: 20px;
}

.fx-li-362 {
  margin-bottom: 4px;
}

.fx-a-363 {
  color: #10B981;
  text-decoration: none;
  font-weight: 500;
}

.fx-b-364 {
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 24px;
}

.fx-p-365 {
  font-size: 13px;
  color: #6B7280;
  margin-bottom: 12px;
}

.fx-b-366 {
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  padding: 20px 24px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.fx-b-367 {
  background: #16A34A;
  color: #fff;
  border-radius: 50%;
  padding: 4px;
}

.fx-h5-368 {
  font-size: 16px;
  font-weight: 700;
  color: #14532D;
  margin: 0 0 4px 0;
}

.fx-p-369 {
  margin: 0;
  color: #166534;
  font-size: 14px;
}

/* --- integrations/webhook-api.html --- */
.fx-b-370 {
  max-width: calc(var(--max) - 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 15px;
}

.fx-b-371 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 24px;
  margin-top: -50px;
  margin-bottom: 100px;
  position: relative;
  z-index: 10;
}

.fx-b-372 {
  background: #fff;
  padding: 24px 32px;
  border-radius: 24px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.02);
  display: flex;
  align-items: center;
  gap: 20px;
  border: 1px solid rgba(229, 231, 235, 0.5);
}

.fx-b-373 {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
  color: #16A34A;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fx-b-374 {
  font-size: 28px;
  font-weight: 800;
  color: #111827;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.fx-b-375 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 100px;
  background: #EFF6FF;
  color: #2563EB;
  margin-bottom: 24px;
  font-size: 14px;
  font-weight: 600;
  gap: 8px;
}

.fx-b-376 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3B82F6;
  box-shadow: 0 0 0 2px rgba(59,130,246,0.2);
}

.fx-h2-377 {
  font-size: clamp(26px, calc(26px + (16) * ((100vw - 320px) / 1100)), 42px);
  font-weight: 800;
  color: #111827;
  margin-bottom: 20px;
  letter-spacing: -0.03em;
}

.fx-p-378 {
  font-size: 18px;
  color: #6B7280;
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.6;
}

.fx-b-379 {
  background: #fff;
  border-radius: 32px;
  padding: 60px 40px;
  margin-bottom: 100px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.02);
  border: 1px solid #F3F4F6;
  position: relative;
  overflow: hidden;
}

.fx-b-380 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(16,185,129,0.02) 0%, transparent 70%);
  pointer-events: none;
}

.fx-b-381 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
}

.fx-b-382 {
  flex: 1 1 250px;
  max-width: 300px;
  background: #F8FAFC;
  padding: 32px;
  border-radius: 24px;
  text-align: center;
  border: 1px dashed #CBD5E1;
}

.fx-b-383 {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #fff;
  color: #3B82F6;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  box-shadow: 0 10px 25px -5px rgba(59,130,246,0.1);
}

.fx-b-384 {
  transform: rotate(-90deg);
  display: flex;
}

.fx-b-385 {
  font-size: 18px;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 8px;
}

.fx-b-386 {
  font-size: 14px;
  color: #64748B;
  line-height: 1.5;
}

.fx-b-387 {
  position: relative;
}

.fx-b-388 {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 20px 40px -10px rgba(16, 185, 129, 0.4);
}

.fx-span-389 {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.04em;
}

.fx-b-390 {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #fff;
  color: #10B981;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  box-shadow: 0 10px 25px -5px rgba(16,185,129,0.1);
}

.fx-b-391 {
  transform: rotate(90deg);
  display: flex;
}

.fx-b-392 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 32px;
  margin-bottom: 100px;
}

.fx-b-393 {
  background: #fff;
  padding: 40px;
  border-radius: 24px;
  border: 1px solid #E5E7EB;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);
}

.fx-b-394 {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: #F0FDF4;
  color: #16A34A;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  transition: all 0.3s ease;
}

.fx-b-395 {
  width: 24px;
  height: 2px;
  background: currentColor;
}

.fx-b-396 {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  padding: 48px;
  border-radius: 32px;
  text-align: center;
  margin-bottom: 100px;
  position: relative;
  overflow: hidden;
}

.fx-b-397 {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg, transparent 0 340deg, rgba(16,185,129,0.05) 360deg);
  animation: spin 10s linear infinite;
  pointer-events: none;
}

.fx-b-398 {
  position: relative;
  z-index: 1;
}

.fx-h3-399 {
  font-size: 20px;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 24px;
}

.fx-b-400 {
  background: #fff;
  border: 1px solid #E5E7EB;
  padding: 20px 32px;
  border-radius: 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 15px;
  color: #059669;
  margin-bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  max-width: 100%;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  overflow-wrap: anywhere;
}

.fx-span-401 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.fx-button-402 {
  background: #F3F4F6;
  border: 1px solid #E5E7EB;
  padding: 8px 16px;
  border-radius: 8px;
  color: #374151;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: background 0.2s;
}

.fx-p-403 {
  font-size: 14px;
  color: #64748B;
  margin: 0;
}

.fx-b-404 {
  background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
  border-radius: 32px;
  padding: 48px 56px;
  color: #064E3B;
  border: 1px solid #A7F3D0;
  margin-bottom: 100px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 32px;
  /* align-items: center; */
  box-shadow: 0 20px 40px -10px rgba(16, 185, 129, 0.1);
  position: relative;
  overflow: hidden;
}

.fx-b-405 {
  position: absolute;
  right: -40px;
  top: -40px;
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(255,255,255,0.6) 0%, transparent 70%);
  border-radius: 50%;
}

.fx-b-406 {
  width: 80px;
  height: 80px;
  border-radius: 24px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 8px 32px rgba(16, 185, 129, 0.15);
  color: #10B981;
}

.fx-b-407 {
  z-index: 1;
}

.fx-h3-408 {
  font-size: clamp(24px, calc(24px + (8) * ((100vw - 320px) / 1100)), 32px);
  font-weight: 800;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
  color: #064E3B;
}

.fx-p-409 {
  font-size: 18px;
  color: #065F46;
  line-height: 1.6;
  margin: 0 0 16px 0;
  max-width: 700px;
}

.fx-p-410 {
  font-size: 18px;
  color: #047857;
  margin: 0;
  font-weight: 500;
}

.fx-b-411 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: 32px;
  margin-bottom: 100px;
}

.fx-b-412 {
  background: #fff;
  border-radius: 32px;
  padding: 48px;
  border: 1px solid #E5E7EB;
  box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.fx-b-413 {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 40px;
}

.fx-b-414 {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: #EFF6FF;
  color: #3B82F6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fx-h2-415 {
  font-size: 26px;
  font-weight: 800;
  color: #111827;
  margin: 0;
  letter-spacing: -0.02em;
}

.fx-h3-416 {
  font-size: 16px;
  font-weight: 700;
  color: #4B5563;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 24px;
}

.fx-b-417 {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 40px;
}

.fx-b-418 {
  display: flex;
  gap: 20px;
}

.fx-b-419 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #DBEAFE;
  color: #2563EB;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}

.fx-b-420 {
  font-weight: 700;
  color: #111827;
  font-size: 16px;
  margin-bottom: 4px;
}

.fx-b-421 {
  color: #6B7280;
  font-size: 14px;
  line-height: 1.5;
}

.fx-h3-422 {
  font-size: 16px;
  font-weight: 700;
  color: #4B5563;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 20px;
}

.fx-b-423 {
  background: #F3F4F6;
  color: #374151;
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
}

.fx-b-424 {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: #F0FDF4;
  color: #16A34A;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fx-b-425 {
  transform: rotate(180deg);
  display: flex;
}

.fx-b-426 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #DCFCE7;
  color: #16A34A;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}

.fx-b-427 {
  background: #F8FAFC;
  border-radius: 40px;
  border: 1px solid #E2E8F0;
  padding: 80px 60px;
  color: #0F172A;
  margin-bottom: 120px;
  position: relative;
  overflow: hidden;
}

.fx-b-428 {
  position: absolute;
  top: 0;
  right: 0;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(16,185,129,0.05) 0%, transparent 70%);
  transform: translate(30%, -30%);
}

.fx-b-429 {
  text-align: center;
  margin-bottom: 60px;
  position: relative;
  z-index: 1;
}

.fx-b-430 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}

.fx-b-431 {
  color: #10B981;
  background: #F0FDF4;
  padding: 12px;
  border-radius: 16px;
}

.fx-h2-432 {
  font-size: clamp(25px, calc(25px + (15) * ((100vw - 320px) / 1100)), 40px);
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 20px 0;
  letter-spacing: -0.03em;
}

.fx-p-433 {
  font-size: 18px;
  color: #64748B;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.6;
}

.fx-b-434 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
  gap: 40px;
  position: relative;
  z-index: 1;
  margin-bottom: 60px;
}

.fx-h3-435 {
  font-size: 20px;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.fx-li-436 {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #475569;
  font-size: 16px;
}

.fx-b-437 {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #10B981;
  flex-shrink: 0;
  /* background: #DCFCE7; */
  padding: 4px;
  border-radius: 50%;
}

.fx-b-438 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fx-h3-439 {
  font-size: 20px;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.fx-b-440 {
  background: #fff;
  border: 1px solid #E2E8F0;
  padding: 16px 20px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.fx-span-441 {
  font-size: 13px;
  font-weight: 800;
  color: #059669;
  background: #D1FAE5;
  padding: 6px 10px;
  border-radius: 8px;
}

.fx-span-442 {
  font-size: 15px;
  color: #334155;
  font-family: ui-monospace, monospace;
  overflow-wrap: anywhere;
  max-width: 100%;
}

.fx-span-443 {
  font-size: 13px;
  font-weight: 800;
  color: #2563EB;
  background: #DBEAFE;
  padding: 6px 10px;
  border-radius: 8px;
}

.fx-b-444 {
  text-align: center;
  position: relative;
  z-index: 1;
}

.fx-a-445 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #10B981;
  color: #fff;
  padding: 18px 40px;
  border-radius: 100px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 10px 20px -5px rgba(16, 185, 129, 0.4);
}

.fx-a-445:hover {
  transform: translateY(-2px);
}

/* Feature pages: responsive refinements (generated from the per-element rules above) */
@media (max-width:1024px) {
  .fx-b-33 {
  grid-template-columns: repeat(2, 1fr);
}
.fx-b-140 {
  grid-template-columns: repeat(2,1fr);
}
}
@media (max-width:768px) {
  .fx-b-25 {
    aspect-ratio: auto;
    min-height: 220px;
  }
  .fx-b-24 {
  flex: 1 1 0px;
  }
  .fx-b-54 {
    aspect-ratio: auto;
    min-height: 220px;
  }
  .fx-b-173 {
    aspect-ratio: auto;
    min-height: 220px;
  }
  .fx-b-277 {
    aspect-ratio: auto;
    min-height: 220px;
  }
  .fx-b-317 {
    aspect-ratio: auto;
    min-height: 220px;
  }
  .fx-b-371 {
    margin-top: 24px;
  }
  .fx-b-248 {
  grid-template-columns: repeat(1, 1fr);
  }
  .fx-b-140 {
  grid-template-columns: repeat(1,1fr);
}
 .fx-b-14-0 {
  grid-template-columns: repeat(1,1fr);
}
.fx-b-160{
   grid-template-columns: repeat(2,1fr);
}
.fx-b-332{
   grid-template-columns: repeat(1,1fr);
}


@media (max-width:600px) {
  .fx-b-160{
   grid-template-columns: repeat(1,1fr);
}
.fx-b-349{
  grid-template-columns: repeat(2,1fr);
}
  .fx-a-23 {
    padding: 16px 18px;
  }
  .fx-b-3-3{
    
  grid-template-columns: repeat(1, 1fr);
  
}
  }
  .fx-b-34 {
    padding: 22px 18px;
  }
  .fx-b-39 {
    padding: 22px 18px;
  }
  .fx-b-44 {
    padding: 22px 18px;
  }
  .fx-b-49 {
    margin-top: 56px;
  }
  .fx-b-53 {
    padding-bottom: var(--section-pad);
  }
  .fx-b-54 {
    margin: 0 auto 56px;
  }
  .fx-b-33 {
  grid-template-columns: repeat(1, 1fr);
}
  .fx-b-57 {
    margin-bottom: 56px;
    margin: 0 auto 56px;
  }
  .fx-b-60 {
    margin-bottom: 56px;
  }
  .fx-b-62 {
    padding: 22px;
  }
  .fx-b-73 {
    margin-bottom: 56px;
  }
  .fx-b-74 {
    padding: 18px;
  }
  .fx-b-79 {
    padding: 18px;
  }
  .fx-a-90 {
    padding: 14px 16px;
  }
  .fx-a-91 {
    padding: 14px 16px;
  }
  .fx-b-96 {
    padding: 22px;
  }
  .fx-b-102 {
    margin-bottom: 56px;
  }
  .fx-b-103 {
    gap: 24px;
  }
  .fx-b-104 {
    padding: 22px;
    gap: 24px;
  }
  .fx-b-118 {
    padding: 22px;
    gap: 24px;
  }
  .fx-b-119 {
    padding: 18px;
  }
  .fx-b-141 {
    padding: 18px;
  }
  .fx-b-177 {
    padding-bottom: var(--section-pad);
  }
  .fx-b-197 {
    margin-bottom: 56px;
  }
  .fx-b-199 {
    margin-bottom: 56px;
    margin: 0 auto 56px;
  }
  .fx-b-202 {
    margin-bottom: 56px;
    margin: 56px auto;
  }
  .fx-b-206 {
    margin-bottom: 56px;
  }
  .fx-b-209 {
    padding: 18px 24px;
  }
  .fx-b-212 {
    padding: 18px;
  }
  .fx-b-220 {
    padding: 16px 16px 18px;
  }
  .fx-b-221 {
    padding: 22px 20px;
  }
  .fx-b-228 {
    padding: 18px 24px;
  }
  .fx-b-238 {
    padding: 18px;
  }
  .fx-b-244 {
    padding: 18px;
  }
  .fx-b-249 {
    padding: 22px;
  }
  .fx-b-276 {
    padding: 18px;
  }
  .fx-b-279 {
    padding: 18px;
  }
  .fx-b-282 {
    padding: 22px 24px 66px;
  }
  .fx-a-310 {
    padding: 18px 18px;
  }
  .fx-b-314 {
    padding: 18px 18px;
  }
  .fx-b-319 {
    padding: 24px 18px;
  }
  .fx-b-332 {
    margin-bottom: 56px;
  }
  .fx-b-333 {
    padding: 18px;
  }
  .fx-b-336 {
    padding: 18px;
  }
  .fx-b-339 {
    padding: 18px;
  }
  .fx-b-344 {
    padding: 22px;
  }
  .fx-b-371 {
    margin-bottom: 56px;
  }
  .fx-b-372 {
    padding: 24px 18px;
  }
  .fx-b-379 {
    padding: 33px 22px;
    margin-bottom: 56px;
  }
  .fx-b-382 {
    padding: 18px;
  }
  .fx-b-392 {
    margin-bottom: 56px;
  }
  .fx-b-393 {
    padding: 22px;
  }
  .fx-b-396 {
    padding: 26px;
    margin-bottom: 56px;
  }
  .fx-b-400 {
    padding: 20px 18px;
  }
  .fx-b-404 {
    padding: 26px 31px;
    margin-bottom: 56px;
  }
  .fx-b-411 {
    margin-bottom: 56px;
  }
  .fx-b-412 {
    padding: 26px;
  }
  .fx-b-427 {
    padding: 44px 33px;
    margin-bottom: 56px;
  }
  .fx-b-434 {
    gap: 24px;
  }
  .fx-a-445 {
    padding: 18px 22px;
  }

}

@media (max-width:480px) {
  .fx-b-279 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =====================================================================
ADDED PAGES: contact, login, register, pricing, resources
Everything below belongs to the five pages added to the site. All
page rules hang off body.ep-page / .ep-N classes so nothing above
this line (the original site) is affected.
===================================================================== */
/* --- Foundation: zero-specificity reset so the original site's tag rules
(svg, a, ul, button, body ...) don't change the added pages --- */
html.h-full {
  height: 100%;
}

.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.ep-page {
  margin: 0;
  min-height: 100%;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: #171717;
  background: #fff;
  overflow-x: hidden;
}

:where(.ep-page) *, :where(.ep-page) *::before, :where(.ep-page) *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 solid #e5e7eb;
}

:where(.ep-page) img, :where(.ep-page) svg {
  display: inline-block;
  vertical-align: middle;
}

:where(.ep-page) img {
  max-width: 100%;
  height: auto;
}

:where(.ep-page) h1, :where(.ep-page) h2, :where(.ep-page) h3, :where(.ep-page) h4 {
  font-size: inherit;
  font-weight: inherit;
}

:where(.ep-page) button, :where(.ep-page) input, :where(.ep-page) textarea, :where(.ep-page) select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  background: transparent;
}

:where(.ep-page) button {
  cursor: pointer;
}

:where(.ep-page) table {
  border-collapse: collapse;
}

:where(.ep-page) ul, :where(.ep-page) ol {
  list-style: none;
}

:where(.ep-page) a {
  color: inherit;
  text-decoration: inherit;
}

.ep-page [hidden] {
  display: none !important;
}

/* --- Utility classes used in the pages' markup (footer + body) --- */
.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.grid {
  display: grid;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.items-start {
  align-items: flex-start;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.shrink-0 {
  flex-shrink: 0;
}

.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

.min-h-full {
  min-height: 100%;
}

.pt-4 {
  padding-top: 1rem;
}

.gap-8 {
  gap: 2rem;
}

.gap-12 {
  gap: 3rem;
}

.text-gray-300 {
  color: #d1d5db;
}

.transition-colors {
  transition: color .15s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1), border-color .15s cubic-bezier(.4, 0, .2, 1);
}

.group:hover .group-hover\:text-\[\#008069\] {
  color: #008069;
}

@media (min-width: 768px) {
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .md\:gap-12 {
    gap: 3rem;
  }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-\[1fr_auto_2fr\] {
    grid-template-columns: 1fr auto 2fr;
  }
  .lg\:gap-20 {
    gap: 5rem;
  }
}

/* --- Header behaviour: desktop nav / mobile drawer / dropdowns --- */
.nav-desktop-only {
  display: none;
}

.nav-mobile-only {
  display: flex;
}

@media (min-width: 1024px) {
  .nav-desktop-only {
    display: flex;
  }
  .nav-mobile-only {
    display: none;
  }
  .ep-page #mobile-menu-drawer {
    display: none !important;
  }
}

.ep-page .drop {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s ease, visibility .15s ease;
}

.ep-page .nav-dropdown-wrapper:hover .drop, .ep-page .nav-dropdown-wrapper:focus-within .drop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.ep-page #mobile-menu-drawer.open {
  display: flex !important;
}

.ep-page #mobile-menu-drawer {
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  margin-left: 16px;
  margin-right: 16px;
}

@media (min-width: 1148px) {
  .ep-page #mobile-menu-drawer {
    margin-left: auto;
    margin-right: auto;
  }
}

.ep-page #mobile-menu-drawer [id^="m-sub-"].open {
  display: flex !important;
}

.ep-page .ep-arrow-open {
  transform: rotate(180deg);
}

@keyframes ep-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

.float-anim {
  animation: ep-float 3s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .float-anim {
    animation: none;
  }
}

/* --- State helpers toggled by script.js --- */
.ep-page .ep-hide {
  display: none !important;
}

.ep-page .ep-show-inline {
  display: inline !important;
}

.ep-page .ep-show-block {
  display: block !important;
}

/* --- Icon sizes (from the pages' width/height attributes) --- */
.ep-svg-14x14 {
  width: 14px;
  height: 14px;
}

.ep-svg-18x18 {
  width: 25px;
  height: 25px;
}

.ep-svg-13x13 {
  width: 13px;
  height: 13px;
}

.ep-svg-16x16 {
  width: 16px;
  height: 16px;
}

.ep-svg-24x24 {
  width: 24px;
  height: 24px;
}

.ep-svg-20x20 {
  width: 20px;
  height: 20px;
}

.ep-svg-12x12 {
  width: 12px;
  height: 12px;
}

.ep-svg-15x15 {
  width: 15px;
  height: 15px;
}

.ep-svg-17x17 {
  width: 17px;
  height: 17px;
}

/* --- Former inline styles (one class per unique style) --- */
.ep-page .ep-1 {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  padding: 0;
  transform: translateZ(0);
  will-change: transform;
}

.ep-page .ep-2 {
  width: 100%;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-radius: 0;
  box-shadow: 0 4px 24px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,1), inset 0 -1px 1px rgba(0,0,0,0.02);
  border-bottom: 1px solid rgba(0,0,0,0.05);
  transition: background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  transform: translateZ(0);
  will-change: transform;
}

.ep-page .ep-3 {
  display: flex;
  flex: 1;
}

.ep-page .ep-4 {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}

.ep-page .ep-5 {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: contain;
}

.ep-page .ep-6 {
  display: flex;
  flex-direction: column;
}

.ep-page .ep-7 {
  font-weight: 550;
  font-size: 18px;
  letter-spacing: -0.05em;
  line-height: 1.1;
}

.ep-page .ep-8 {
  color: #146e23ff;
}

.ep-page .ep-9 {
  color: #29338dff;
}

.ep-page .ep-10 {
  font-size: 10px;
  color: #6B7280;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.ep-page .ep-11 {
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.ep-page .ep-12 {
  position: relative;
}

.ep-page .ep-13 {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #4B5563;
  transition: all .2s ease;
  font-family: inherit;
  padding: 10px 18px;
  border-radius: 50px;
  text-decoration: none;
}

.ep-page .ep-14 {
  transition: transform .2s;
  transform: none;
  display: flex;
  color: #9CA3AF;
}

.ep-page .ep-15 {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  width: 720px;
  padding-top: 12px;
}

.ep-page .ep-16 {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  box-shadow: 0 20px 48px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06);
  overflow: hidden;
}

.ep-page .ep-17 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: #F9FAFB;
  padding: 1px;
}

.ep-page .ep-18 {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 16px;
  background: #fff;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background .15s;
  text-decoration: none;
}

.ep-page .ep-19 {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: #EBF5FF;
  color: #3B82F6;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ep-page .ep-20 {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}

.ep-page .ep-21 {
  font-size: 11.5px;
  color: #6B7280;
}

.ep-page .ep-22 {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: #FFEDD5;
  color: #EA580C;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ep-page .ep-23 {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: #DCFCE7;
  color: #16A34A;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ep-page .ep-24 {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: #CCFBF1;
  color: #0D9488;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ep-page .ep-25 {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: #F3E8FF;
  color: #9333EA;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ep-page .ep-26 {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: #FEF9C3;
  color: #CA8A04;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ep-page .ep-27 {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: #FEE2E2;
  color: #DC2626;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ep-page .ep-28 {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: #E0E7FF;
  color: #4F46E5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ep-page .ep-29 {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: #FCE7F3;
  color: #DB2777;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ep-page .ep-30 {
  padding: 12px 16px;
  border-top: 1px solid #F3F4F6;
  background: #F9FAFB;
}

.ep-page .ep-31 {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #16A34A;
  font-family: inherit;
  text-decoration: none;
}

.ep-page .ep-32 {
  font-size: 14px;
  font-weight: 500;
  color: #4B5563;
  text-decoration: none;
  transition: all .2s ease;
  padding: 10px 18px;
  border-radius: 50px;
  background: transparent;
}

.ep-page .ep-33 {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  width: 500px;
  padding-top: 12px;
}

.ep-page .ep-34 {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: #F0FDF4;
  color: #16A34A;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ep-page .ep-35 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 1;
}

.ep-page .ep-36 {
  align-items: center;
  justify-content: center;
  width: 96px;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 600;
  color: #4B5563;
  text-decoration: none;
  border-radius: 8px;
  background: transparent;
  transition: all .2s ease;
}

.ep-page .ep-37 {
  align-items: center;
  justify-content: center;
  width: 96px;
  padding: 10px 0;
  border-radius: 8px;
  background: linear-gradient(135deg, #10B981, #059669);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25), inset 0 1px 1px rgba(255,255,255,0.3);
  transition: all .2s ease;
}

.ep-page .ep-38 {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid #E5E7EB;
  background: #fff;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ep-page .ep-39 {
  display: none;
  max-width: 1100px;
  margin: 10px auto 0;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
  border: 1px solid #E5E7EB;
  flex-direction: column;
  gap: 6px;
  z-index: 100;
}

.ep-page .ep-40 {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  color: #374151;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.ep-page .ep-41 {
  color: #9CA3AF;
  transition: transform 0.2s;
  display: flex;
}

.ep-page .ep-42 {
  display: none;
  padding: 12px 14px 8px 24px;
  flex-direction: column;
  gap: 12px;
}

.ep-page .ep-43 {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

.ep-page .ep-44 {
  font-size: 13px;
  font-weight: 600;
  color: #16A34A;
  text-decoration: none;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.ep-page .ep-45 {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  color: #374151;
  text-decoration: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ep-page .ep-46 {
  color: #9CA3AF;
}

.ep-page .ep-47 {
  height: 1px;
  background: #F3F4F6;
  margin: 8px 0;
}

.ep-page .ep-48 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.ep-page .ep-49 {
  padding: 10px 0;
  text-align: center;
  border-radius: 8px;
  border: 1px solid #E5E7EB;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  text-decoration: none;
}

.ep-page .ep-50 {
  padding: 10px 0;
  text-align: center;
  border-radius: 8px;
  background: linear-gradient(135deg, #10B981, #059669);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
}

.ep-page .ep-51 {
  flex: 1;
  display: flex;
  flex-direction: column;
  opacity: 1;
  transform: none;
}

.ep-page .ep-52 {
  font-family: var(--font);
  background: #FFFFFF;
  color: #0A1628;
  min-height: 100vh;
}

.ep-page .ep-53 {
  padding: var(--section-pad) var(--gutter) 40px;
  text-align: center;
  background: #F5F7F5;
  position: relative;
  overflow: hidden;
}

.ep-page .ep-54 {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
}

.ep-page .ep-55 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #54656F;
  margin-bottom: 24px;
  font-weight: 500;
}

.ep-page .ep-56 {
  color: #54656F;
  text-decoration: none;
  transition: color 0.2s;
}

.ep-page .ep-57 {
  color: #0A1628;
}

.ep-page .ep-58 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid #E4EAE4;
  font-size: 12px;
  font-weight: 700;
  color: #54656F;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.ep-page .ep-59 {
  color: #10B981;
}

.ep-page .ep-60 {
  font-size: clamp(38px, 5vw, 44px);
  font-weight: 800;
  color: #0A1628;
  letter-spacing: -0.04em;
  line-height: 1.1;
  margin-bottom: 20px;
}

.ep-page .ep-61 {
  font-size: 16px;
  color: #54656F;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
  margin-bottom: 32px;
}

.ep-page .ep-62 {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.ep-page .ep-63 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 12px;
  background: #0A1628;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}

.ep-page .ep-64 {
  margin-left: 6px;
}

.ep-page .ep-65 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid #E4EAE4;
  color: #0A1628;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s;
}

.ep-page .ep-66 {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  gap: 40px;
  padding: 40px var(--gutter) var(--section-pad);
}

.ep-page .ep-67 {
  width: 40%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ep-page .ep-68 {
  padding: 24px;
  border-radius: 16px;
  background: #F5F7F5;
  border: 1px solid #E4EAE4;
  transition: all 0.3s ease;
}

.ep-page .ep-69 {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #25D366;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.ep-page .ep-70 {
  transform: scale(0.8);
}

.ep-page .ep-71 {
  font-size: 16px;
  font-weight: 700;
  color: #0A1628;
  margin-bottom: 4px;
}

.ep-page .ep-72 {
  font-size: 13px;
  color: #54656F;
  line-height: 1.5;
  margin-bottom: 12px;
}

.ep-page .ep-73 {
  font-size: 14px;
  font-weight: 700;
  color: #0A1628;
  text-decoration: none;
  transition: color 0.2s;
}

.ep-page .ep-74 {
  padding: 24px;
  border-radius: 16px;
  background: #F5F7F5;
  border: 1px solid #E4EAE4;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.ep-page .ep-75 {
  font-size: 13px;
  color: #54656F;
  line-height: 1.6;
  margin-bottom: 12px;
}

.ep-page .ep-76 {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #54656F;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 16px;
}

.ep-page .ep-77 {
  transform: scale(0.8);
  display: flex;
}

.ep-page .ep-78 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 8px;
  background: #10B981;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s;
  margin-top: auto;
  align-self: flex-start;
}
.ep-page .ep-78:hover{
background: #087f56;
}
.ep-page .ep-79 {
  width: 60%;
  padding: 32px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #E4EAE4;
  box-shadow: 0 12px 24px -6px rgba(0,0,0,0.05);
  position: relative;
  overflow: hidden;
}

.ep-page .ep-80 {
  font-size: 22px;
  font-weight: 800;
  color: #0A1628;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}

.ep-page .ep-81 {
  font-size: 14px;
  color: #54656F;
  margin-bottom: 24px;
}

.ep-page .ep-82 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ep-page .ep-83 {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.ep-page .ep-84 {
  flex: 1 1 180px;
}

.ep-page .ep-85 {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #0A1628;
  margin-bottom: 6px;
}

.ep-page .ep-86 {
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1.5px solid #E4EAE4;
  background: #fff;
  font-size: 14px;
  color: #0A1628;
  outline: none;
  transition: all 0.2s ease;
  box-shadow: none;
  font-family: inherit;
}

.ep-page .ep-87 {
  position: absolute;
  left: 14px;
  top: 11px;
  transform: none;
  color: #0A1628;
  font-weight: 500;
  font-size: 14px;
}

.ep-page .ep-88 {
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1.5px solid #E4EAE4;
  background: #fff;
  font-size: 14px;
  color: #0A1628;
  outline: none;
  transition: all 0.2s ease;
  box-shadow: none;
  font-family: inherit;
  padding-left: 46px;
}

.ep-page .ep-89 {
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1.5px solid #E4EAE4;
  background: #fff;
  font-size: 14px;
  color: #0A1628;
  outline: none;
  transition: all 0.2s ease;
  box-shadow: none;
  font-family: inherit;
  resize: vertical;
  min-height: 100px;
}

.ep-page .ep-90 {
  padding: 12px;
  background: #10B981;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}

.ep-page .ep-91 {
  font-size: 13px;
  color: #54656F;
  text-align: center;
  margin-top: -8px;
}

.ep-page .ep-92 {
  max-width: var(--max);
  margin: 0 auto 80px;
  padding: 0 var(--gutter);
}

.ep-page .ep-93 {
  font-family: var(--font);
  background: #FAFAFA;
  color: #1A1A1A;
  position: relative;
  overflow: hidden;
}

.ep-page .ep-94 {
  max-width: 1280px;
  margin: 0 auto;
  padding: 64px 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 48px;
  position: relative;
  z-index: 10;
}

.ep-page .ep-95 {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  margin-bottom: 20px;
}

.ep-page .ep-96 {
  height: 40px;
  width: auto;
  object-fit: contain;
}

.ep-page .ep-97 {
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.03em;
}

.ep-page .ep-98 {
  color: #146e23;
}

.ep-page .ep-99 {
  color: #29338d;
}

.ep-page .ep-100 {
  font-size: 14px;
  color: #6B7280;
  line-height: 1.6;
  margin-bottom: 32px;
  margin-top: 0;
  max-width: 280px;
}

.ep-page .ep-101 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #00E676;
  color: #fff;
  padding: 12px 24px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 230, 118, 0.3);
  transition: transform .2s, box-shadow .2s;
  align-self: flex-start;
}

.ep-page .ep-102 {
  background: #fff;
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 220px;
  box-shadow: 0 10px 40px -10px rgba(0,0,0,0.05);
}

.ep-page .ep-103 {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}

.ep-page .ep-104 {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 230, 118, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ep-page .ep-105 {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.ep-page .ep-106 {
  font-size: 13px;
  color: #6B7280;
  margin-top: 2px;
  font-weight: 500;
}

.ep-page .ep-107 {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(139, 92, 246, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ep-page .ep-108 {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 0;
  border-bottom: none;
}

.ep-page .ep-109 {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(245, 158, 11, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ep-page .ep-110 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.ep-page .ep-111 {
  color: #00E676;
}

.ep-page .ep-112 {
  font-size: 12px;
  font-weight: 700;
  color: #111827;
  margin: 0;
}

.ep-page .ep-113 {
  height: 1px;
  background: rgba(0,0,0,0.06);
  margin-bottom: 16px;
  width: 100%;
}

.ep-page .ep-114 {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.ep-page .ep-115 {
  padding: 12px 0;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}

.ep-page .ep-116 {
  font-size: 14px;
  color: #4B5563;
  text-decoration: none;
  font-weight: 500;
  transition: color .2s;
}

.ep-page .ep-117 {
  padding: 12px 0;
  border-bottom: none;
}

.ep-page .ep-118 {
  color: #8B5CF6;
}

.ep-page .ep-119 {
  color: #3B82F6;
}

.ep-page .ep-120 {
  width: 100%;
  height: 1px;
  background: rgba(0,0,0,0.08);
}

.ep-page .ep-121 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.ep-page .ep-122 {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ep-page .ep-123 {
  height: 28px;
  width: auto;
  object-fit: contain;
}

.ep-page .ep-124 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 1px solid rgba(0,0,0,0.1);
  padding-left: 16px;
}

.ep-page .ep-125 {
  font-size: 13px;
  color: #6B7280;
  margin: 0;
}

.ep-page .ep-126 {
  color: inherit;
  text-decoration: underline;
}

.ep-page .ep-127 {
  display: flex;
  gap: 12px;
  align-items: center;
}

.ep-page .ep-128 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,0.04);
  color: #4B5563;
  transition: all .2s;
  text-decoration: none;
}

.ep-page .ep-129 {
  background: radial-gradient(120% 120% at 50% 0%, #FFFFFF 0%, #F3F6F5 50%, #E8EEEC 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px var(--gutter);
  font-family: var(--font);
}

.ep-page .ep-130 {
  max-width: var(--max);
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
}

.ep-page .ep-131 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px;
}

.ep-page .ep-132 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: #54656F;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 100px;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 2px 8px rgba(0,0,0,0.02);
  transition: all 0.2s;
}

.ep-page .ep-133 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #6B7280;
}

.ep-page .ep-134 {
  font-weight: 700;
  color: #008069;
  text-decoration: none;
}

.ep-page .ep-135 {
  background: #FFFFFF;
  border-radius: 24px;
  border: 1px solid rgba(0, 128, 105, 0.12);
  box-shadow: 0 24px 64px -12px rgba(0, 30, 20, 0.08), 0 4px 16px rgba(0, 0, 0, 0.02);
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.ep-page .ep-136 {
  background: linear-gradient(145deg, #FAFAFA 0%, #F3F4F6 50%, #E5E7EB 100%);
  padding: 44px 36px;
  color: #111827;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.ep-page .ep-137 {
  position: absolute;
  top: -80px;
  right: -80px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(37, 211, 102, 0.10);
  filter: blur(60px);
  pointer-events: none;
}

.ep-page .ep-138 {
  position: absolute;
  bottom: -60px;
  left: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(0, 128, 105, 0.15);
  filter: blur(60px);
  pointer-events: none;
}

.ep-page .ep-139 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}

.ep-page .ep-140 {
  width: 200px;
  /* height: 40px; */
  border-radius: 8px;
  /* background: #fff; */
  padding: 2px;
  /* box-shadow: 0 2px 4px rgba(0,0,0,0.1); */
}

.ep-page .ep-141 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #111827;
}

.ep-page .ep-142 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}

.ep-page .ep-143 {
  font-size: 14px;
  color: #4B5563;
  line-height: 1.6;
  margin-bottom: 32px;
}

.ep-page .ep-144 {
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 24px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
  transform: translateZ(0);
}

.ep-page .ep-145 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.ep-page .ep-146 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 10px rgba(16,185,129,0.5);
}

.ep-page .ep-147 {
  font-size: 12.5px;
  font-weight: 600;
  color: #059669;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.ep-page .ep-148 {
  font-size: 13px;
  color: #374151;
  margin: 0;
  line-height: 1.5;
  min-height: 39px;
}

.ep-page .ep-149 {
  border-right: 2px solid #059669;
  animation: blink 1s step-end infinite;
  padding-right: 2px;
}

.ep-page .ep-150 {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

.ep-page .ep-151 {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ep-page .ep-152 {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10B981, #059669);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  box-shadow: 0 2px 8px rgba(16,185,129,0.3);
}

.ep-page .ep-153 {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}

.ep-page .ep-154 {
  display: flex;
  gap: 16px;
  margin-top: 16px;
  font-size: 11.5px;
  color: #6B7280;
}

.ep-page .ep-155 {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ep-page .ep-156 {
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ep-page .ep-157 {
  margin-bottom: 24px;
}

.ep-page .ep-158 {
  font-size: 24px;
  font-weight: 800;
  color: #111B21;
  letter-spacing: -0.03em;
  margin-bottom: 6px;
}

.ep-page .ep-159 {
  font-size: 13.5px;
  color: #6B7280;
}

.ep-page .ep-160 {
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ep-page .ep-161 {
  font-size: 12px;
  color: #166534;
}

.ep-page .ep-162 {
  font-weight: 600;
}

.ep-page .ep-163 {
  background: #16A34A;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}

.ep-page .ep-164 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  background: #F3F4F6;
  padding: 4px;
  border-radius: 12px;
  margin-bottom: 24px;
}

.ep-page .ep-165 {
  padding: 9px 0;
  border-radius: 9px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  background: #FFFFFF;
  color: #111827;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.ep-page .ep-166 {
  padding: 9px 0;
  border-radius: 9px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  color: #6B7280;
  box-shadow: none;
}

.ep-page .ep-167 {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.ep-page .ep-168 {
  position: relative;
  display: flex;
  align-items: center;
}

.ep-page .ep-169 {
  position: absolute;
  left: 14px;
  color: #9CA3AF;
  display: flex;
}

.ep-page .ep-170 {
  width: 100%;
  padding: 11px 14px 11px 40px;
  border-radius: 10px;
  border: 1px solid #D1D5DB;
  font-size: 14px;
  color: #111827;
  outline: none;
  background: #FAFAFA;
  transition: all 0.2s;
}

.ep-page .ep-171 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.ep-page .ep-172 {
  font-size: 12.5px;
  font-weight: 600;
  color: #374151;
}

.ep-page .ep-173 {
  background: none;
  border: none;
  font-size: 12px;
  color: #008069;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.ep-page .ep-174 {
  width: 100%;
  padding: 11px 42px 11px 40px;
  border-radius: 10px;
  border: 1px solid #D1D5DB;
  font-size: 14px;
  color: #111827;
  outline: none;
  background: #FAFAFA;
  transition: all 0.2s;
}

.ep-page .ep-175 {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  color: #9CA3AF;
  cursor: pointer;
  display: flex;
  padding: 4px;
}

.ep-page .ep-176 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.ep-page .ep-177 {
  width: 16px;
  height: 16px;
  accent-color: #008069;
  cursor: pointer;
}

.ep-page .ep-178 {
  font-size: 13px;
  color: #4B5563;
  cursor: pointer;
  user-select: none;
}

.ep-page .ep-179 {
  margin-top: 6px;
  padding: 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, #10B981, #059669);
  color: #FFFFFF;
  border: none;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
  transition: all 0.2s;
}

.ep-page .ep-180 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 16px;
}

.ep-page .ep-181 {
  flex: 1;
  height: 1px;
  background: #E5E7EB;
}

.ep-page .ep-182 {
  font-size: 12px;
  color: #9CA3AF;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.ep-page .ep-183 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #E5E7EB;
  background: #FFFFFF;
  color: #374151;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.ep-page .ep-184 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #BBF7D0;
  background: #F0FDF4;
  color: #166534;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.ep-page .ep-185 {
  margin-top: 24px;
  text-align: center;
  font-size: 13px;
  color: #6B7280;
}

.ep-page .ep-186 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4px;
}

.ep-page .ep-187 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
}

.ep-page .ep-188 {
  width: 200px;
  /* height: 34px; */
  border-radius: 8px;
  /* background: #fff; */
  padding: 2px;
  /* box-shadow: 0 2px 4px rgba(0,0,0,0.1); */
}

.ep-page .ep-189 {
  margin-bottom: 36px;
  padding: 0 8px;
}

.ep-page .ep-190 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.ep-page .ep-191 {
  font-size: 12px;
  font-weight: 700;
  color: #008069;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: #E6F4F1;
  padding: 4px 10px;
  border-radius: 100px;
}

.ep-page .ep-192 {
  font-size: 13px;
  font-weight: 700;
  color: #374151;
}

.ep-page .ep-193 {
  width: 100%;
  height: 6px;
  background: #E5E7EB;
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: 24px;
}

.ep-page .ep-194 {
  height: 100%;
  width: 33%;
  background: linear-gradient(90deg, #10B981, #008069);
  border-radius: 100px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.ep-page .ep-195 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.ep-page .ep-196 {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #F0FDF4;
  border: 1.5px solid #10B981;
  padding: 10px 14px;
  border-radius: 14px;
  text-align: left;
  cursor: default;
  transition: all 0.2s;
}

.ep-page .ep-197 {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #008069;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12.5px;
  flex-shrink: 0;
}

.ep-page .ep-198 {
  font-size: 13px;
  font-weight: 700;
  color: #111827;
}

.ep-page .ep-199 {
  font-size: 11px;
  color: #6B7280;
}

.ep-page .ep-200 {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #FAFAFA;
  border: 1px solid #E5E7EB;
  padding: 10px 14px;
  border-radius: 14px;
  text-align: left;
  cursor: default;
  transition: all 0.2s;
}

.ep-page .ep-201 {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #E5E7EB;
  color: #6B7280;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12.5px;
  flex-shrink: 0;
}

.ep-page .ep-202 {
  font-size: 13px;
  font-weight: 700;
  color: #6B7280;
}

.ep-page .ep-203 {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #FAFAFA;
  border: 1px solid #E5E7EB;
  padding: 10px 14px;
  border-radius: 14px;
  text-align: left;
}

.ep-page .ep-204 {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ep-page .ep-205 {
  font-size: 20px;
  font-weight: 800;
  color: #111B21;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.ep-page .ep-206 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.ep-page .ep-207 {
  position: absolute;
  left: 14px;
  color: #9CA3AF;
}

.ep-page .ep-208 {
  width: 100%;
  padding: 11px 14px 11px 40px;
  border-radius: 10px;
  border: 1px solid #D1D5DB;
  font-size: 14px;
  outline: none;
  background: #FAFAFA;
}

.ep-page .ep-209 {
  width: 100%;
  padding: 11px 42px 11px 40px;
  border-radius: 10px;
  border: 1px solid #D1D5DB;
  font-size: 14px;
  outline: none;
  background: #FAFAFA;
}

.ep-page .ep-210 {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  color: #9CA3AF;
  cursor: pointer;
  display: flex;
}

.ep-page .ep-211 {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.ep-page .ep-212 {
  padding: 13px 28px;
  border-radius: 10px;
  background: linear-gradient(135deg, #10B981, #059669);
  color: #fff;
  border: none;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
  transition: all 0.2s;
}

.ep-page .ep-213 {
  font-family: var(--font);
  background: #F5F7F5;
  color: #0A1628;
  position: relative;
}

.ep-page .ep-214 {
  display: inline;
}

.ep-page .ep-215 {
  display: none;
}

.ep-page .ep-216 {
  color: #2563EB;
}

.ep-page .ep-217 {
  font-size: 16px;
  color: #54656F;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
  margin-bottom: 0;
}

.ep-page .ep-218 {
  margin-top: 28px;
  display: flex;
  justify-content: center;
  width: 100%;
}

.ep-page .ep-219 {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(232, 239, 232, 0.7);
  backdrop-filter: blur(8px);
  padding: 6px;
  border-radius: 18px;
  border: 1px solid rgba(216, 226, 216, 0.8);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.04);
  width: 100%;
  max-width: 720px;
}

.ep-page .ep-220 {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 6px;
  width: calc(50% - 6px);
  background: #0A1628;
  border-radius: 14px;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform: translateX(0);
  box-shadow: 0 6px 16px rgba(10, 22, 40, 0.25), inset 0 1px 2px rgba(255, 255, 255, 0.1);
  z-index: 0;
}

.ep-page .ep-221 {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 12px 10px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  background: transparent;
  color: #FFFFFF;
}

.ep-page .ep-222 {
  font-size: 16px;
  transition: transform 0.5s;
  transform: scale(1.15);
}

.ep-page .ep-223 {
  max-width: 120px;
  opacity: 1;
  margin-left: 2px;
}

.ep-page .ep-224 {
  font-size: 10px;
  background: #25D366;
  color: #0A1628;
  padding: 3px 7px;
  border-radius: 6px;
  font-weight: 800;
}

.ep-page .ep-225 {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 12px 10px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  background: transparent;
  color: #3A5068;
}

.ep-page .ep-226 {
  font-size: 16px;
  transition: transform 0.5s;
  transform: scale(1);
}

.ep-page .ep-227 {
  max-width: 0;
  opacity: 1;
  margin-left: -8px;
}

.ep-page .ep-228 {
  font-size: 10px;
  background: #38BDF8;
  color: #0F172A;
  padding: 3px 7px;
  border-radius: 6px;
  font-weight: 800;
}

.ep-page .ep-229 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 22px;
  width: 100%;
  max-width: 840px;
}

.ep-page .ep-230 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.ep-page .ep-231 {
  font-size: 14px;
  font-weight: 400;
  color: #54656F;
  transition: color .2s;
}

.ep-page .ep-232 {
  width: 56px;
  height: 30px;
  border-radius: 30px;
  background: #25D366;
  border: none;
  position: relative;
  cursor: pointer;
  transition: background .28s;
  flex-shrink: 0;
}

.ep-page .ep-233 {
  left: 27px;
}

.ep-page .ep-234 {
  font-size: 14px;
  font-weight: 700;
  color: #0A1628;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color .2s;
}

.ep-page .ep-235 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(37,211,102,.18);
  color: #25D366;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.ep-page .ep-236 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #FFFFFF;
  border: 1px solid #D8E2D8;
  border-radius: 50px;
  padding: 8px 12px 8px 20px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
  flex-wrap: wrap;
  
}

.ep-page .ep-237 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: #4B5563;
}

.ep-page .ep-238 {
  font-weight: 700;
  color: #008069;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(0,128,105,0.08);
  transition: background .15s;
}

.ep-page .ep-239 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 30px;
  background: #F3F4F6;
  color: #4B5563;
  border: 1px solid #E5E7EB;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
  box-shadow: none;
  transition: all .2s ease;
}

.ep-page .ep-240 {
  background: #9CA3AF;
  color: #FFFFFF;
  padding: 1px 7px;
  border-radius: 12px;
  font-size: 11.5px;
  font-weight: 800;
}

.ep-page .ep-241 {
  display: block;
}

.ep-page .ep-242 {
  padding: 0 var(--gutter) var(--section-pad);
  background: #FFFFFF;
}

.ep-page .ep-243 {
  max-width: calc(var(--max) - 2 * var(--gutter));
  margin: 0 auto;
  --col: 4;
}

.ep-page .ep-244 {
  background: #F9FCFB;
  border: 1.5px solid #A7F3D0;
  border-radius: 20px;
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0;
  margin-bottom: 0;
  box-shadow: 0 8px 24px -6px rgba(0,128,105,0.08);
}

.ep-page .ep-245 {
  margin-bottom: 14px;
}

.ep-page .ep-246 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(0,128,105,0.12);
  color: #008069;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.ep-page .ep-247 {
  font-size: 19px;
  font-weight: 800;
  color: #0A1628;
}

.ep-page .ep-248 {
  font-size: 13px;
  color: #54656F;
  line-height: 1.5;
  margin-top: 5px;
}

.ep-page .ep-249 {
  margin-top: 22px;
  margin-bottom: 22px;
  border-top: 1px solid;
  border-color: rgba(0,0,0,.06);
  padding-top: 18px;
}

.ep-page .ep-250 {
  display: flex;
  align-items: baseline;
  gap: 3px;
}

.ep-page .ep-251 {
  font-size: 2rem;
  font-weight: 800;
  color: #008069;
  letter-spacing: -0.03em;
}

.ep-page .ep-252 {
  font-size: 12.5px;
  color: #54656F;
  font-weight: 600;
}

.ep-page .ep-253 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}

.ep-page .ep-254 {
  font-size: 11.5px;
  color: #008069;
  font-weight: 700;
}

.ep-page .ep-255 {
  font-size: 11px;
  color: #64748B;
}

.ep-page .ep-256 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ep-page .ep-257 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 12px 0;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 750;
  cursor: pointer;
  background: #008069;
  color: #FFFFFF;
  border: none;
  box-shadow: 0 4px 14px rgba(0,128,105,0.25);
}

.ep-page .ep-258 {
  margin-top: 20px;
}

.ep-page .ep-259 {
  font-size: 11.5px;
  font-weight: 750;
  color: #0A1628;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.ep-page .ep-260 {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ep-page .ep-261 {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 12.5px;
  color: #54656F;
  line-height: 1.4;
}

.ep-page .ep-262 {
  margin-top: 1px;
  flex-shrink: 0;
}

.ep-page .ep-263 {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed #D1E7DD;
}

.ep-page .ep-264 {
  font-size: 11px;
  font-weight: 750;
  color: #DC2626;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.ep-page .ep-265 {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ep-page .ep-266 {
  background: #FFFFFF;
  border: 1px solid #E4EAE4;
  border-radius: 20px;
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0;
  margin-bottom: 0;
}

.ep-page .ep-267 {
  font-size: 2rem;
  font-weight: 800;
  color: #0A1628;
  letter-spacing: -0.03em;
}

.ep-page .ep-268 {
  font-size: 11.5px;
  color: #8BAF8E;
  margin-top: 4px;
}

.ep-page .ep-269 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 12px 0;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 750;
  cursor: pointer;
  background: #FFFFFF;
  color: #0A1628;
  border: 1.5px solid #CBD5E1;
}

.ep-page .ep-270 {
  background: #FFFFFF;
  border: 2px solid #25D366;
  border-radius: 20px;
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0;
  margin-bottom: 14px;
}

.ep-page .ep-271 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: #25D366;
  color: #0A1628;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.ep-page .ep-272 {
  font-size: 2rem;
  font-weight: 800;
  color: #25D366;
  letter-spacing: -0.03em;
}

.ep-page .ep-273 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 12px 0;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 750;
  cursor: pointer;
  background: #25D366;
  color: #0A1628;
  border: none;
  box-shadow: 0 4px 14px rgba(37,211,102,0.3);
}

.ep-page .ep-274 {
  max-width: calc(var(--max) - 2 * var(--gutter));
  margin: 0 auto;
  padding-top: 32px;
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}

.ep-page .ep-275 {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: #607D93;
}

.ep-page .ep-276 {
  padding: 0 var(--gutter) 70px;
  background: #FFFFFF;
}

.ep-page .ep-277 {
  max-width: calc(var(--max) - 2 * var(--gutter));
  margin: 0 auto;
  background: #F4FAF6;
  border: 1.5px solid #C3E9D0;
  border-radius: 20px;
  padding: 32px 36px;
}

.ep-page .ep-278 {
  display: flex;
  /* align-items: center; */
  gap: 12px;
  margin-bottom: 16px;
}

.ep-page .ep-279 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  /* background: rgba(37,211,102,0.2); */
  color: #1A9E4A;
}

.ep-page .ep-280 {
  font-size: 18px;
  font-weight: 800;
  color: #0A1628;
}

.ep-page .ep-281 {
  font-size: 13px;
  color: #54656F;
}

.ep-page .ep-282 {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 16px;
  margin-top: 20px;
}

.ep-page .ep-283 {
  background: #FFFFFF;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid #DFEDE3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ep-page .ep-284 {
  font-size: 12px;
  font-weight: 700;
  color: #54656F;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ep-page .ep-285 {
  font-size: 20px;
  font-weight: 800;
  color: #0A1628;
  margin-top: 4px;
}

.ep-page .ep-286 {
  font-size: 12.5px;
  color: #54656F;
  margin-top: 6px;
}

.ep-page .ep-287 {
  margin-top: 14px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #F0FBF7;
  border: 1px solid #A7F3D0;
  color: #008069;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.ep-page .ep-288 {
  background: #FFFFFF;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid #DFEDE3;
}

.ep-page .ep-289 {
  font-size: 12px;
  font-weight: 500;
  color: #54656F;
}

.ep-page .ep-290 {
  font-size: 18px;
  font-weight: 800;
  color: #1A9E4A;
  margin-top: 4px;
}

.ep-page .ep-291 {
  padding: var(--section-pad) var(--gutter);
  background: #F5F7F5;
  border-top: 1px solid #E4EAE4;
}

.ep-page .ep-292 {
  max-width: calc(var(--max) - 2 * var(--gutter));
  margin: 0 auto;
}

.ep-page .ep-293 {
  max-width: 560px;
  margin-bottom: 56px;
}

.ep-page .ep-294 {
  font-size: clamp(1.8rem,3vw,2.4rem);
  font-weight: 800;
  color: #0A1628;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.ep-page .ep-295 {
  margin-top: 12px;
  font-size: 16px;
  color: #54656F;
  line-height: 1.6;
}

.ep-page .ep-296 {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 20px;
}

.ep-page .ep-297 {
  background: #fff;
  border-radius: 16px;
  padding: 28px 24px;
  border: 1px solid #E4EAE4;
  cursor: default;
}

.ep-page .ep-298 {
  font-size: 16px;
  font-weight: 700;
  color: #0A1628;
  margin-bottom: 8px;
}

.ep-page .ep-299 {
  font-size: 13.5px;
  color: #54656F;
  line-height: 1.55;
  margin-bottom: 18px;
}

.ep-page .ep-300 {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.ep-page .ep-301 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: #3B4A54;
}

.ep-page .ep-302 {
  padding: var(--section-pad) var(--gutter);
  background: #fff;
  border-top: 1px solid #E4EAE4;
}

.ep-page .ep-303 {
  max-width: 520px;
  margin-bottom: 56px;
}

.ep-page .ep-304 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(360px,1fr));
  gap: 24px;
}

.ep-page .ep-305 {
  border-radius: 20px;
  padding: 40px 36px;
  border: 1px solid #E4EAE4;
  background: #F5F7F5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}

.ep-page .ep-306 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.ep-page .ep-307 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: #E8F0FF;
  color: #0066cc;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.ep-page .ep-308 {
  font-size: 14px;
  font-weight: 700;
  color: #0A1628;
}

.ep-page .ep-309 {
  margin-top: 16px;
}

.ep-page .ep-310 {
  font-size: 22px;
  font-weight: 800;
  color: #0A1628;
}

.ep-page .ep-311 {
  margin-top: 10px;
  font-size: 15px;
  color: #54656F;
  line-height: 1.6;
}

.ep-page .ep-312 {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ep-page .ep-313 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  color: #3B4A54;
}

.ep-page .ep-314 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 12px;
  background: transparent;
  border: 1.5px solid #25D366;
  color: #1A9E4A;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  align-self: flex-start;
}

.ep-page .ep-315 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: #F4E8FF;
  color: #7B22CC;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.ep-page .ep-316 {
  padding: var(--section-pad) var(--gutter) var(--section-pad);
  background: #F5F7F5;
  border-top: 1px solid #E4EAE4;
}

.ep-page .ep-317 {
  overflow-x: auto;
  border-radius: 16px;
  border: 1px solid #E4EAE4;
  background: #fff;
}

.ep-page .ep-318 {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.ep-page .ep-319 {
  background: #fff;
}

.ep-page .ep-320 {
  width: 32%;
  padding: 20px 20px;
  text-align: left;
  border-bottom: 2px solid #E4EAE4;
  font-size: 13px;
  font-weight: 600;
  color: #54656F;
}

.ep-page .ep-321 {
  width: 17%;
  padding: 20px 10px;
  text-align: center;
  border-bottom: 2px solid #E4EAE4;
  background: #F5FAF7;
  font-size: 13.5px;
  font-weight: 750;
  color: #0A1628;
}

.ep-page .ep-322 {
  width: 17%;
  padding: 20px 10px;
  text-align: center;
  border-bottom: 2px solid #E4EAE4;
  background: #fff;
  font-size: 13.5px;
  font-weight: 750;
  color: #0A1628;
}

.ep-page .ep-323 {
  width: 17%;
  padding: 20px 10px;
  text-align: center;
  border-bottom: 2px solid #25D366;
  background: #F0FBF4;
  font-size: 13.5px;
  font-weight: 750;
  color: #0A1628;
}

.ep-page .ep-324 {
  font-size: 10px;
  font-weight: 700;
  color: #25D366;
  margin-bottom: 4px;
  letter-spacing: 0.06em;
}

.ep-page .ep-325 {
  padding: 18px 20px 8px;
  font-size: 12px;
  font-weight: 700;
  color: #8BAF8E;
  letter-spacing: 0.07em;
  background: #F0F5F0;
  border-top: 1px solid #E4EAE4;
}

.ep-page .ep-326 {
  border-bottom: 1px solid #E9ECEF;
}

.ep-page .ep-327 {
  padding: 14px 20px;
  font-size: 13.5px;
  color: #3B4A54;
  font-weight: 500;
}

.ep-page .ep-328 {
  padding: 14px 10px;
  font-size: 12.5px;
  text-align: center;
  font-weight: 550;
  color: #94A3B8;
  background: #FAFCFB;
}

.ep-page .ep-329 {
  padding: 14px 10px;
  font-size: 12.5px;
  text-align: center;
  font-weight: 550;
  color: #0A1628;
  background: transparent;
}

.ep-page .ep-330 {
  padding: 14px 10px;
  font-size: 12.5px;
  text-align: center;
  font-weight: 550;
  color: #0A1628;
  background: #F9FDFB;
}

.ep-page .ep-331 {
  padding: 14px 10px;
  font-size: 12.5px;
  text-align: center;
  font-weight: 550;
  color: #0A1628;
  background: #FAFCFB;
}

.ep-page .ep-332 {
  padding: 0 24px 90px;
  background: #FFFFFF;
}

.ep-page .ep-333 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;
  gap: 24px;
  align-items: stretch;
  margin-bottom: 60px;
}

.ep-page .ep-334 {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 20px;
  padding: 32px 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}

.ep-page .ep-335 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: #EFF6FF;
  color: #2563EB;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.ep-page .ep-336 {
  font-size: 21px;
  font-weight: 800;
  color: #0A1628;
}

.ep-page .ep-337 {
  font-size: 13px;
  font-weight: 700;
  color: #2563EB;
  margin-top: 2px;
}

.ep-page .ep-338 {
  font-size: 13.5px;
  color: #54656F;
  line-height: 1.55;
  margin-top: 8px;
}

.ep-page .ep-339 {
  margin-top: 24px;
  margin-bottom: 24px;
  border-top: 1px solid #F1F5F9;
  padding-top: 20px;
}

.ep-page .ep-340 {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.ep-page .ep-341 {
  font-size: 2.3rem;
  font-weight: 800;
  color: #0A1628;
  letter-spacing: -0.03em;
}

.ep-page .ep-342 {
  font-size: 13px;
  color: #54656F;
  font-weight: 600;
}

.ep-page .ep-343 {
  font-size: 12px;
  color: #64748B;
  margin-top: 4px;
}

.ep-page .ep-344 {
  font-size: 13px;
  font-weight: 700;
  color: #0A1628;
  margin-bottom: 10px;
}

.ep-page .ep-345 {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ep-page .ep-346 {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13.5px;
  color: #334155;
}

.ep-page .ep-347 {
  margin-top: 2px;
  flex-shrink: 0;
}

.ep-page .ep-348 {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ep-page .ep-349 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 13px 0;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  background: #2563EB;
  color: #FFFFFF;
  border: none;
  box-shadow: 0 4px 12px rgba(37,99,235,0.25);
}

.ep-page .ep-350 {
  background: #FFFFFF;
  border: 1.5px solid #FED7AA;
  border-radius: 20px;
  padding: 32px 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}

.ep-page .ep-351 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 6px;
}

.ep-page .ep-352 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: #FFF7ED;
  color: #D97706;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.ep-page .ep-353 {
  font-size: 13px;
  font-weight: 700;
  color: #D97706;
  margin-top: 2px;
}

.ep-page .ep-354 {
  margin-top: 18px;
  background: #FFFBEB;
  padding: 4px;
  border-radius: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  border: 1px solid #FEF3C7;
}

.ep-page .ep-355 {
  padding: 6px 0;
  border-radius: 8px;
  border: none;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  background: #FFFFFF;
  color: #D97706;
  box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}

.ep-page .ep-356 {
  padding: 6px 0;
  border-radius: 8px;
  border: none;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  background: transparent;
  color: #78350F;
  box-shadow: none;
}

.ep-page .ep-357 {
  margin-top: 18px;
  margin-bottom: 20px;
  border-top: 1px solid #F1F5F9;
  padding-top: 16px;
}

.ep-page .ep-358 {
  font-size: 12px;
  color: #16A34A;
  font-weight: 700;
  margin-top: 4px;
}

.ep-page .ep-359 {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 10px;
}

.ep-page .ep-360 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  color: #B45309;
  margin-bottom: 6px;
}

.ep-page .ep-361 {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11.5px;
  color: #92400E;
  line-height: 1.45;
}

.ep-page .ep-362 {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ep-page .ep-363 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 13px 0;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  background: #F59E0B;
  color: #FFFFFF;
  border: none;
  box-shadow: 0 4px 12px rgba(245,158,11,0.25);
}

.ep-page .ep-364 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: #F3E8FF;
  color: #7E22CE;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.ep-page .ep-365 {
  font-size: 13px;
  font-weight: 700;
  color: #7E22CE;
  margin-top: 2px;
}

.ep-page .ep-366 {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 16px;
}

.ep-page .ep-367 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  margin-bottom: 4px;
}

.ep-page .ep-368 {
  font-size: 11.5px;
  color: #64748B;
  line-height: 1.45;
}

.ep-page .ep-369 {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ep-page .ep-370 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 13px 0;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  background: #7E22CE;
  color: #FFFFFF;
  border: none;
  box-shadow: 0 4px 12px rgba(126,34,206,0.25);
}

.ep-page .ep-371 {
  margin-bottom: 60px;
  background: #F8FAFC;
  border-radius: 20px;
  padding: 36px 32px;
  border: 1px solid #E2E8F0;
}

.ep-page .ep-372 {
  font-size: 22px;
  font-weight: 800;
  color: #0A1628;
  margin-top: 8px;
}

.ep-page .ep-373 {
  font-size: 13.5px;
  color: #54656F;
  margin-top: 4px;
}

.ep-page .ep-374 {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
}

.ep-page .ep-375 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ep-page .ep-376 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: #F1F5F9;
  color: #475569;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.ep-page .ep-377 {
  font-size: 16px;
  color: #0A1628;
}

.ep-page .ep-378 {
  font-size: 16px;
  font-weight: 800;
  color: #0A1628;
  margin-top: 12px;
}

.ep-page .ep-379 {
  font-size: 12.5px;
  color: #54656F;
  margin-top: 4px;
  line-height: 1.45;
}

.ep-page .ep-380 {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  background: #F8FAFC;
  border: 1px solid #CBD5E1;
  color: #0A1628;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all .2s ease;
}

.ep-page .ep-381 {
  background: #F8FAFC;
  border-radius: 20px;
  padding: 40px 32px;
  border: 1px solid #E2E8F0;
}

.ep-page .ep-382 {
  margin-bottom: 28px;
}

.ep-page .ep-383 {
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 800;
  color: #0A1628;
  margin-top: 10px;
}

.ep-page .ep-384 {
  font-size: 14.5px;
  color: #54656F;
  margin-top: 6px;
}

.ep-page .ep-385 {
  overflow-x: auto;
  border-radius: 14px;
  border: 1px solid #E2E8F0;
  background: #FFFFFF;
}

.ep-page .ep-386 {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  text-align: left;
}

.ep-page .ep-387 {
  background: #F1F5F9;
  border-bottom: 2px solid #CBD5E1;
}

.ep-page .ep-388 {
  padding: 16px 20px;
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  width: 30%;
}

.ep-page .ep-389 {
  padding: 16px 20px;
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  width: 35%;
}

.ep-page .ep-390 {
  padding: 16px 20px;
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  width: 20%;
}

.ep-page .ep-391 {
  padding: 16px 20px;
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  width: 15%;
  text-align: center;
}

.ep-page .ep-392 {
  border-bottom: 1px solid #F1F5F9;
}

.ep-page .ep-393 {
  padding: 16px 20px;
  font-size: 14px;
  font-weight: 700;
  color: #0A1628;
}

.ep-page .ep-394 {
  padding: 16px 20px;
  font-size: 13.5px;
  color: #475569;
}

.ep-page .ep-395 {
  padding: 16px 20px;
  font-size: 14px;
  font-weight: 700;
  color: #0F172A;
}

.ep-page .ep-396 {
  padding: 16px 20px;
  text-align: center;
}

.ep-page .ep-397 {
  padding: 6px 14px;
  border-radius: 8px;
  background: #0A1628;
  color: #FFFFFF;
  border: none;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.ep-page .ep-398 {
  margin-top: 40px;
  background: #FFFFFF;
  border-radius: 20px;
  padding: 36px 32px;
  border: 1px solid #E2E8F0;
}

.ep-page .ep-399 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.ep-page .ep-400 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #F1F5F9;
}

.ep-page .ep-401 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  font-size: 13px;
  color: #475569;
  line-height: 1.5;
}

.ep-page .ep-402 {
  font-weight: 800;
  color: #2563EB;
}

.ep-page .ep-403 {
  position: fixed;
 padding: 10px 10px !important;
    bottom:80px !important;
    right:15px !important;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #0A1628;
  color: #FFFFFF;
  
  border-radius: 50px;
  box-shadow: 0 12px 32px rgba(10, 22, 40, 0.35);
  border: 1px solid rgba(255,255,255,0.15);
  cursor: pointer;
  transition: transform .2s ease;
}

.ep-page .ep-404 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ep-page .ep-405 {
  font-size: 14px;
  font-weight: 750;
}

.ep-page .ep-406 {
  font-size: 12px;
  background: rgba(255,255,255,0.1);
  color: #CBD5E1;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
}

.ep-page .ep-407 {
  min-height: 100vh;
  background: #FAFAFA;
  padding-bottom: 100px;
}

.ep-page .ep-408 {
  max-width: var(--max);
  margin: 0 auto;
  padding: 40px var(--gutter);
}

.ep-page .ep-409 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
}

.ep-page .ep-410 {
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
  border: 1px solid rgba(229, 231, 235, 0.8);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}

.ep-page .ep-411 {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
}

.ep-page .ep-412 {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ep-page .ep-413 {
  padding: 28px;
}

.ep-page .ep-414 {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 12px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.ep-page .ep-415 {
  font-size: 15px;
  color: #6B7280;
  line-height: 1.6;
  margin: 0;
}

/* --- Former <style> blocks --- */
/* from contact.html */
.contact-input::placeholder {
  color: #A0AEC0;
}

.submit-btn:hover:not(:disabled) {
  background: #087f56 !important;
  transform: translateY(-1px);
}

.contact-card:hover {
  border-color: #25D366 !important;
  transform: translateY(-2px);
}

.contact-link:hover {
  color: #10B981 !important;
  text-decoration: underline;
}

/* from login.html */
@keyframes blink {
  0%, 100% {
    border-color: transparent;
  }
  50% {
    border-color: #059669;
  }
}

/* from pricing.html */
/* Chat-bubble card notch on featured plan */
.plan-featured {
  position: relative;
}

.plan-featured::before {
  content: '';
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 14px solid #25D366;
  z-index: 2;
}

/* Toggle knob */
.knob {
  position: absolute;
  top: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.28s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}

/* Table row hover */
.cmp-row:hover td {
  background: rgba(37,211,102,.06) !important;
}

/* Feature-drill card hover */
.feat-card {
  transition: all .25s ease;
}

.feat-card:hover {
  border-color: #25D366 !important;
  transform: translateY(-3px);
  box-shadow: 0 12px 24px -10px rgba(37, 211, 102, 0.2);
}

/* Pricing Card Hover */
.pricing-card {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -8px rgba(10, 22, 40, 0.08);
}

/* CTA link hover */
.cta-link:hover {
  opacity: .9;
  transform: translateY(-1px);
}

.cta-link {
  transition: all .2s ease;
}

/* Segment switch styling */
.category-tab {
  transition: all .4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.category-tab:active {
  transform: scale(0.97);
}

.badge-reveal {
  transition: all .4s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: middle;
}

.plans-grid-5 {
  display: grid;
  grid-template-columns: repeat(var(--col, 5), minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
  justify-content: center;
}





@media (max-width: 1200px) {
  .plans-grid-5 {
    grid-template-columns: repeat(min(var(--col, 5), 2), minmax(0, 1fr)) !important;
  }
  .unofficial-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 1024px){
.ep-page .ep-296 {
  grid-template-columns: repeat(2,1fr);
}
.ep-page .ep-282 {
  grid-template-columns: repeat(2,1fr);
}
 
}
@media (max-width: 900px) {
  .contact-layout {
    flex-direction: column !important;
  }
  .contact-info, .contact-form-container {
    width: 100% !important;
    /* padding: 32px 24px !important; */
  }
}

@media (max-width: 600px) {
  .plans-grid-5 {
    grid-template-columns: 1fr !important;
  }
  .unofficial-grid {
    grid-template-columns: 1fr !important;
  }
  .ep-page .ep-282 {
  grid-template-columns: repeat(1,1fr);
}
  .category-switcher {
    flex-direction: column !important;
    width: 100% !important;
  }
  .category-tab {
    width: 100% !important;
    justify-content: center !important;
  }
  .ep-page .ep-296 {
  grid-template-columns: repeat(1,1fr);
}
.ep-page .ep-237 span:nth-child(1) {
  display:none;
}
}

@keyframes toastSlide {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.toast-popup {
  animation: toastSlide 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes sweep {
  0% {
    transform: translateX(-150%) skewX(-15deg);
  }
  50%, 100% {
    transform: translateX(250%) skewX(-15deg);
  }
}

@keyframes subtlePulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.035);
  }
}

.btn-official:hover + .btn-unofficial:not(.ep-active), .btn-official:focus-visible + .btn-unofficial:not(.ep-active) {
  animation: subtlePulse 1.8s infinite ease-in-out;
}

.hint-arrow {
  position: absolute;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  color: #64748B;
  transform: translateX(10px);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

@keyframes gentlePointLeft {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-5px);
  }
}

.btn-unofficial:not(.ep-active) .hint-arrow {
  opacity: 1;
  transform: translateX(0);
  animation: gentlePointLeft 2s infinite ease-in-out;
}

.hint-arrow-right {
  position: absolute;
  left: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  color: #64748B;
  transform: translateX(-10px);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

@keyframes gentlePointRight {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(5px);
  }
}

.btn-official:not(.ep-active) .hint-arrow-right {
  opacity: 1;
  transform: translateX(0);
  animation: gentlePointRight 2s infinite ease-in-out;
}

.sliding-pill {
  overflow: hidden;
}

.sliding-pill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  animation: sweep 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
}

/* --- Pricing: Official / Unofficial switcher + billing toggle states --- */
.ep-page .category-switcher.ep-unofficial .sliding-pill {
  transform: translateX(100%) !important;
}

.ep-page .category-switcher.ep-unofficial .btn-official {
  color: #3A5068 !important;
}

.ep-page .category-switcher.ep-unofficial .btn-unofficial {
  color: #FFFFFF !important;
}

.ep-page .category-switcher.ep-unofficial .btn-official > span:nth-child(2) {
  transform: scale(1) !important;
}

.ep-page .category-switcher.ep-unofficial .btn-unofficial > span:nth-child(1) {
  transform: scale(1.15) !important;
}

.ep-page .category-switcher.ep-unofficial .btn-official .badge-reveal {
  max-width: 0 !important;
  margin-left: -8px !important;
}

.ep-page .category-switcher.ep-unofficial .btn-unofficial .badge-reveal {
  max-width: 120px !important;
  margin-left: 2px !important;
}

.ep-page #pricing-billing-container.ep-monthly #pricing-billing-knob {
  left: 3px !important;
}

.ep-page #pricing-billing-container.ep-monthly #pricing-billing-toggle-btn {
  background: #CBD5E1 !important;
}

.ep-page #pricing-billing-container.ep-monthly #pricing-billing-monthly-label {
  font-weight: 700 !important;
  color: #0A1628 !important;
}

.ep-page #pricing-billing-container.ep-monthly #pricing-billing-yearly-label {
  font-weight: 400 !important;
  color: #54656F !important;
}

/* --- Responsive: fixed multi-column layouts stack on tablets / phones --- */
@media (max-width: 900px) {
  .ep-page .ep-195, .ep-page .ep-333 {
    grid-template-columns: repeat(1, 1fr) !important;
  }
}

@media (max-width: 760px) {
  .ep-page .ep-48, .ep-page .ep-164, .ep-page .ep-300, .ep-page .ep-354 {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .ep-page .ep-195 {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .ep-page .ep-133{
    font-size: 11px !important;
  }
   .ep-page .ep-132{
    font-size: 11px !important;
  }
}

@media (max-width: 420px) {
  .ep-page .ep-135, .ep-page .ep-304, .ep-page .ep-409 {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .ep-page .category-switcher .sliding-pill {
    width: calc(100% - 12px) !important;
    height: calc(50% - 6px) !important;
    bottom: auto !important;
  }
 
  .ep-page .category-switcher.ep-unofficial .sliding-pill {
    transform: translateY(100%) !important;
  }
  .ep-page .category-tab {
    flex-wrap: wrap !important;
    row-gap: 4px !important;
  }
}

.ep-page #mobile-menu-drawer .ep-48 {
  grid-template-columns: 1fr 1fr !important;
}


/* =====================================================================
   UNIFIED SECTION SPACING  (all pages)
   Desktop 60px  |  Tablet (<=1024px) 45px  |  Mobile (<=700px) 40px
   Change the three tokens at the top of this file (:root) to tune the whole site:
     --section-pad : top/bottom padding of every section
     --head-gap    : space between a section heading and its content
     --block-gap   : space between large blocks inside a section
   ===================================================================== */
.section-head { margin-bottom: var(--head-gap); }

/* section bands that had hard-coded padding */
.ep-page .ep-276, .ep-page .ep-332, .ep-page .ep-407, .fx-b-282 { padding-bottom: var(--section-pad); }
.fx-b-174, .fx-b-197, .fx-b-73, .fx-b-28, .fx-section { padding-top: var(--section-pad); }
.fx-b-49 { margin-top: 0; padding-top: var(--section-pad); padding-bottom: var(--section-pad); }
.fx-b-379, .fx-b-427 { padding-top: var(--section-pad); padding-bottom: var(--section-pad); }
.fx-b-171 { margin-top: var(--section-pad); }

/* heading (title + intro) -> content */
.fx-b-57, .fx-b-29, .fx-b-102, .fx-b-199, .fx-b-429,
.ep-page .ep-293, .ep-page .ep-303, .fx-p-94, .fx-p-159 { margin-bottom: var(--head-gap); }
.fx-b-202 { margin-top: 0; margin-bottom: var(--head-gap); }

/* block -> block inside a section */
.fx-split, .fx-b-197, .fx-b-206, .fx-b-60, .fx-b-54, .fx-b-73, .fx-b-332, .fx-b-371,
.fx-b-379, .fx-b-392, .fx-b-396, .fx-b-404, .fx-b-411, .fx-b-427, .fx-b-434,
.ep-page .ep-371, .ep-page .ep-92, .ep-page .ep-333 { margin-bottom: var(--block-gap); }


/* ================================
   Pricing: cart button, cart popup, order popup, toast
================================ */

/* --- Monthly view shows 3 plan columns (Starter is yearly only) --- */
.ep-page .plans-grid-5.ep-monthly {
  --col: 3;
}

/* --- Header cart button (filled state) --- */
.ep-page .ep-239:hover {
  background: #E5E7EB;
}

.ep-page .ep-239.ep-cart-active,
.ep-page .ep-239.ep-cart-active:hover {
  background: #0A1628;
  color: #FFFFFF;
  border-color: #0A1628;
  box-shadow: 0 6px 18px rgba(10, 22, 40, 0.25);
}

.ep-page .ep-239.ep-cart-active .ep-240 {
  background: #25D366;
  color: #0A1628;
}

.ep-page .ep-cart-total {
  font-size: 13px;
  font-weight: 750;
  color: #E2E8F0;
  white-space: nowrap;
}

/* --- Added state on plan buttons --- */
.ep-page .cta-link.ep-added {
  filter: brightness(0.94);
}

.ep-page .cart-viewlink {
  display: block;
  margin: 10px auto 0;
  padding: 0;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: #008069;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.ep-page .cart-viewlink:hover {
  color: #0A1628;
}

/* --- Popup shell --- */
body.ep-modal-open {
  overflow: hidden;
}

.cart-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(10, 22, 40, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.cart-overlay.ep-open {
  display: flex;
  animation: cartFade .2s ease;
}

.cart-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  background: #FFFFFF;
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(10, 22, 40, 0.35);
  outline: none;
  color: #0A1628;
  animation: cartPop .25s cubic-bezier(0.16, 1, 0.3, 1);
}

.cart-dialog-sm {
  max-width: 620px;
}

@keyframes cartFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes cartPop {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes cartSheet {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* --- Cart header --- */
.cart-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 28px 16px;
  flex-shrink: 0;
}

.cart-head-icon,
.cart-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #DCFCE7;
  color: #008069;
  flex-shrink: 0;
}

.cart-head-text {
  flex: 1;
  min-width: 0;
}

.cart-head-text h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 750;
  color: #0A1628;
}

.cart-head-text p {
  margin: 2px 0 0;
  font-size: 13px;
  color: #54656F;
}

.cart-clear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: none;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #EF4444;
  cursor: pointer;
  white-space: nowrap;
}

.cart-clear:hover {
  background: #FEF2F2;
}

.cart-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #EEF2F6;
  color: #475569;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s ease;
}

.cart-close:hover {
  background: #E2E8F0;
}

.cart-close-abs {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
}

.cart-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 28px 28px;
}

/* --- Empty state --- */
.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 8px 8px;
}

.cart-empty-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 14px;
}

.cart-empty h3 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 750;
}

.cart-empty p {
  margin: 0 0 20px;
  font-size: 14px;
  color: #54656F;
}

.cart-empty .cart-btn {
  width: auto;
  padding-left: 28px;
  padding-right: 28px;
}

/* --- Items --- */
.cart-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cart-item {
  padding: 16px 18px;
  background: #F0FBF6;
  border: 1px solid #BBF0D6;
  border-radius: 16px;
}

.cart-item-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.cart-item-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.cart-item-name {
  font-size: 15.5px;
  font-weight: 750;
  color: #0A1628;
}

.cart-item-badge {
  padding: 3px 10px;
  border-radius: 20px;
  background: #CFF3E2;
  color: #00664F;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .03em;
}

.cart-item-note {
  margin-top: 4px;
  font-size: 12.5px;
  color: #54656F;
}

.cart-item-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #FEE2E2;
  color: #EF4444;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s ease;
}

.cart-item-remove:hover {
  background: #FECACA;
}

.cart-item-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #CDEFDD;
}

.cart-qty {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #54656F;
}

.cart-qty-ctrl {
  display: inline-flex;
  align-items: center;
  background: #FFFFFF;
  border: 1px solid #CDEFDD;
  border-radius: 10px;
  overflow: hidden;
}

.cart-qty-ctrl button {
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  background: #F0FBF6;
  color: #0A1628;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.cart-qty-ctrl button:hover:not(:disabled) {
  background: #DCFCE7;
}

.cart-qty-ctrl button:disabled {
  color: #9CA3AF;
  cursor: not-allowed;
}

.cart-qty-ctrl span {
  min-width: 36px;
  text-align: center;
  font-size: 14px;
  font-weight: 750;
  color: #0A1628;
}

.cart-item-price {
  font-size: 12.5px;
  color: #54656F;
  text-align: right;
}

.cart-item-price strong {
  font-size: 17px;
  font-weight: 800;
  color: #008069;
}

/* --- Summary --- */
.cart-summary {
  margin-top: 16px;
  padding: 16px 20px;
  background: #F8FAFB;
  border: 1px solid #E4EAEE;
  border-radius: 16px;
}

.cart-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  font-size: 14px;
  color: #54656F;
}

.cart-row > span:last-child {
  font-weight: 600;
  color: #475569;
}

.cart-row-total {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px dashed #CBD5E1;
  font-size: 17px;
  font-weight: 800;
  color: #0A1628;
}

.cart-row-total > span:last-child {
  font-size: 19px;
  font-weight: 800;
  color: #008069;
}

/* --- Form --- */
.cart-form-title {
  margin: 24px 0 14px;
  font-size: 15px;
  font-weight: 750;
  color: #0A1628;
}

.cart-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.cart-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.cart-field-full {
  grid-column: 1 / -1;
}

.cart-field label {
  font-size: 12.5px;
  font-weight: 700;
  color: #334155;
}

.cart-field input,
.cart-field textarea {
  width: 100%;
  padding: 11px 14px;
  background: #FFFFFF;
  border: 1px solid #D5DEE6;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  color: #0A1628;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.cart-field textarea {
  resize: vertical;
  min-height: 78px;
}

.cart-field input::placeholder,
.cart-field textarea::placeholder {
  color: #9AA7B4;
}

.cart-field input:focus,
.cart-field textarea:focus {
  outline: none;
  border-color: #008069;
  box-shadow: 0 0 0 3px rgba(0, 128, 105, 0.15);
}

.cart-field.ep-invalid input {
  border-color: #EF4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.cart-error {
  min-height: 0;
  font-size: 11.5px;
  font-weight: 600;
  color: #DC2626;
}

.cart-error:empty {
  display: none;
}

/* --- Buttons --- */
.cart-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 20px;
  border: none;
  border-radius: 14px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 750;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.cart-btn:hover {
  transform: translateY(-1px);
}

.cart-btn + .cart-btn {
  margin-top: 10px;
}

.cart-btn-primary {
  background: #008069;
  color: #FFFFFF;
  box-shadow: 0 6px 18px rgba(0, 128, 105, 0.28);
}

.cart-btn-primary:hover {
  background: #006F5B;
}

.cart-btn-wa {
  background: #00D26A;
  color: #06231B;
  box-shadow: 0 6px 18px rgba(0, 210, 106, 0.25);
}

.cart-btn-wa:hover {
  background: #00BF61;
}

.cart-btn-soft {
  background: #EEF2F6;
  color: #334155;
}

.cart-btn-soft:hover {
  background: #E2E8F0;
}

.cart-btn-auto {
  width: auto;
  margin: 0 !important;
  padding: 13px 24px;
  font-size: 14px;
}

/* --- Order submitted popup --- */
.order-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 36px 36px;
  overflow-y: auto;
  text-align: center;
}

.order-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: #DCFCE7;
  color: #059669;
}

.order-body h2 {
  margin: 0 0 12px;
  font-size: 24px;
  font-weight: 800;
  color: #0A1628;
}

.order-msg {
  max-width: 480px;
  margin: 0 0 24px;
  font-size: 14.5px;
  line-height: 1.6;
  color: #54656F;
}

.order-msg strong {
  color: #0A1628;
}

.order-summary {
  width: 100%;
  margin-bottom: 26px;
  padding: 18px 22px;
  background: #F8FAFB;
  border: 1px solid #E4EAEE;
  border-radius: 16px;
  text-align: left;
}

.order-summary-title {
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 750;
  color: #0A1628;
}

.order-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  font-size: 14px;
  color: #54656F;
}

.order-line span:last-child {
  font-weight: 750;
  color: #475569;
  white-space: nowrap;
}

.order-total {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px dashed #CBD5E1;
  font-size: 16px;
  font-weight: 800;
  color: #008069;
}

.order-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* --- Add-to-cart toast --- */
.cart-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 10040;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 32px);
  padding: 10px 10px 10px 18px;
  background: #0A1628;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50px;
  box-shadow: 0 12px 32px rgba(10, 22, 40, 0.35);
  font-size: 13.5px;
  font-weight: 700;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 20px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}

.cart-toast.ep-show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.cart-toast-spark {
  color: #25D366;
}

.cart-toast-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cart-toast-btn {
  flex-shrink: 0;
  padding: 7px 14px;
  border: none;
  border-radius: 30px;
  background: #00D26A;
  color: #06231B;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

/* --- Responsive --- */
@media (max-width: 900px) {
  .ep-page .ep-236 {
    border-radius: 24px;
    justify-content: center;
    padding: 10px 14px;
  }

  .ep-page .ep-237 {
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-width: 600px) {
  .cart-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .cart-dialog,
  .cart-dialog-sm {
    max-width: none;
    max-height: 94vh;
    max-height: 94dvh;
    border-radius: 22px 22px 0 0;
    animation: cartSheet .3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .cart-head {
    gap: 10px;
    padding: 18px 16px 12px;
  }

  .cart-head-icon {
    width: 38px;
    height: 38px;
  }

  .cart-head-text h2 {
    font-size: 19px;
  }

  .cart-clear span {
    display: none;
  }

  .cart-clear {
    padding: 8px;
    background: #FEF2F2;
    border-radius: 50%;
  }

  .cart-body {
    padding: 4px 16px 24px;
  }

  .cart-item {
    padding: 14px;
  }

  .cart-item-price {
    margin-left: auto;
  }

  .cart-fields {
    grid-template-columns: 1fr;
  }

  .cart-field input,
  .cart-field textarea {
    font-size: 16px;
  }

  .order-body {
    padding: 56px 18px 24px;
  }

  .order-body h2 {
    font-size: 21px;
  }

  .order-summary {
    padding: 16px;
  }

  .order-actions {
    flex-direction: column;
    width: 100%;
  }

  .cart-btn-auto {
    width: 100%;
  }

  .cart-toast {
    left: 16px;
    right: 16px;
    bottom: 16px;
    max-width: none;
    justify-content: space-between;
    transform: translateY(20px);
  }

  .cart-toast.ep-show {
    transform: translateY(0);
  }


}

@media (prefers-reduced-motion: reduce) {
  .cart-overlay.ep-open,
  .cart-dialog,
  .cart-toast {
    animation: none;
    transition: none;
  }
}

.order-check svg {
  width: 32px;
  height: 32px;
}
/* --- Contact form: CAPTCHA + status message --- */
.ep-page .captcha-box { display: flex; flex-direction: column; }
.ep-page .captcha-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ep-page .captcha-img { border-radius: 8px; border: 1.5px solid #E4EAE4; max-width: 100%; height: 50px; width: 180px; }
.ep-page .captcha-refresh {
  width: 50px; height: 50px; border-radius: 8px; border: 1.5px solid #E4EAE4; background: #fff;
  color: #0A1628; font-size: 20px; line-height: 1; cursor: pointer; transition: all 0.2s ease;
}
.ep-page .captcha-refresh:hover { border-color: #25D366; color: #008069; }
.ep-page .captcha-input { flex: 1 1 120px; min-width: 100px; width: auto; height: 50px; box-sizing: border-box; }
.ep-page .contact-status { margin: 0; font-size: 14px; font-weight: 600; }
.ep-page .contact-status:empty { display: none; }
.ep-page .contact-status.is-ok { color: #008069; }
.ep-page .contact-status.is-error { color: #DC2626; }
.ep-page .submit-btn:disabled { opacity: 0.7; cursor: not-allowed; }
.cart-form .cart-error { margin: 0 0 12px; }
.cart-btn:disabled { opacity: 0.7; cursor: not-allowed; }

/* --- Thank-you + 404 pages --- */
.status-page { flex: 1; display: flex; align-items: center; justify-content: center; padding: 140px 20px 80px; background: #f6faf7; }
.status-card { width: 100%; max-width: 560px; background: #fff; border: 1px solid #E4EAE4; border-radius: 16px; padding: 48px 36px; text-align: center; box-shadow: 0 10px 40px rgba(10, 22, 40, 0.06); }
.status-card h1 { margin: 0 0 12px; font-size: 30px; color: #0A1628; }
.status-card p { margin: 0 0 14px; font-size: 15px; line-height: 1.6; color: #54656F; }
.status-icon { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; margin-bottom: 20px; }
.status-ok { background: rgba(37, 211, 102, 0.14); color: #008069; }
.status-404 { font-size: 84px; font-weight: 800; line-height: 1; margin-bottom: 8px; background: linear-gradient(135deg, #25D366, #1f4fa8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.status-count { font-size: 14px !important; }
.status-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 22px 0 18px; }
.status-btn { display: inline-block; padding: 12px 26px; border-radius: 8px; background: #25D366; color: #fff; font-weight: 700; font-size: 15px; text-decoration: none; transition: all .2s ease; }
.status-btn:hover { background: #1fb858; }
.status-btn-ghost { background: #fff; color: #0A1628; border: 1.5px solid #E4EAE4; }
.status-btn-ghost:hover { background: #f1f5f1; }
.status-links { font-size: 14px !important; margin: 0 !important; }
.status-links a { color: #008069; text-decoration: none; font-weight: 600; }
@media (max-width: 520px) { .status-card { padding: 36px 20px; } .status-card h1 { font-size: 25px; } }

/* --- Phone field with country flag + dial code (Contact form + Pricing cart form only; built by js/custom.js) --- */
.phone-field {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  background: #fff;
  border: 1.5px solid #E4EAE4;
  border-radius: 8px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.cart-field .phone-field { border: 1px solid #D5DEE6; border-radius: 10px; }
.phone-field:focus-within { border-color: #008069; box-shadow: 0 0 0 3px rgba(0, 128, 105, .15); }
.phone-field.is-invalid,
.phone-field.is-invalid:focus-within,
.cart-field.ep-invalid .phone-field { border-color: #EF4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .12); }
.phone-field .phone-code-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0 6px 0 12px; margin: 0;
  background: transparent; border: 0; border-radius: 8px 0 0 8px;
  font: inherit; font-size: 14px; font-weight: 500; color: #0A1628;
  cursor: pointer; white-space: nowrap;
}
.phone-field .phone-code-btn:hover .phone-caret { color: #0A1628; }
.phone-field .phone-flag { width: 22px; height: 16px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); flex: none; }
.phone-field .phone-caret { width: 14px; height: 14px; color: #6b7280; flex: none; }
.phone-field .phone-dial { margin-left: 2px; }
.phone-field input[type="tel"] {
  flex: 1 1 auto; min-width: 0; width: auto;
  border: 0 !important; box-shadow: none !important; background: transparent !important;
  padding-left: 8px !important; border-radius: 0 8px 8px 0 !important; outline: none;
}
.phone-error { display: none; margin: 6px 2px 0; font-size: 12.5px; font-weight: 500; color: #EF4444; }
.phone-list {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  width: 280px; max-width: calc(100vw - 32px);
  background: #fff; border: 1px solid #D5DEE6; border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 60, 50, .16);
  display: none; overflow: hidden;
}
.phone-field.is-open .phone-list { display: block; }
.phone-search {
  width: 100%; box-sizing: border-box; padding: 10px 12px; border: 0; border-bottom: 1px solid #e5eaea;
  font: inherit; font-size: 13px; outline: none; background: #fff; color: #0A1628;
}
.phone-options { list-style: none; margin: 0; padding: 4px 0; max-height: 220px; overflow-y: auto; }
.phone-options li {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; font-size: 13px; color: #0A1628; cursor: pointer;
}
.phone-options li:hover, .phone-options li.is-active { background: #e3f1ed; }
.phone-options li .phone-opt-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone-options li .phone-opt-dial { color: #6b7280; flex: none; }
.phone-options li.is-empty { color: #6b7280; cursor: default; }
.phone-options li.is-empty:hover { background: transparent; }

.required{
color:red;
}