/* ============================================================
   Ekhoni Digital — Home Page Styles
   All inline CSS from index.php extracted here
   ============================================================ */

/* ================= GLOBAL ================= */
html, body {
  overflow-x: hidden !important;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
section {
  overflow: hidden;
}

/* ================= HERO SECTION ================= */
#hero {
  background: linear-gradient(135deg, #f8fafc, #eef2ff);
  padding: 110px 0 90px;
  overflow: hidden;
}
#hero h1 {
  font-size: 46px;
  font-weight: 900;
  line-height: 1.25;
  color: #0f172a;
}
#hero h2 {
  margin-top: 16px;
  font-size: 18px;
  line-height: 1.7;
  color: #475569;
  max-width: 520px;
}
#hero .btn-get-started {
  margin-top: 26px;
  padding: 14px 34px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  background: linear-gradient(120deg, #2563eb, #0ea5e9);
  box-shadow: 0 18px 40px rgba(37, 99, 235, 0.45);
  transition: 0.25s;
}
#hero .btn-get-started:hover {
  transform: translateY(-2px);
  box-shadow: 0 26px 55px rgba(37, 99, 235, 0.65);
}
#hero .hero-img img {
  max-width: 100%;
  border-radius: 28px;
  box-shadow: 0 30px 70px rgba(15, 23, 42, 0.25);
  transform: perspective(800px) rotateY(-8deg);
  transition: 0.4s ease;
}
#hero .hero-img img:hover {
  transform: perspective(800px) rotateY(0deg) scale(1.03);
}

@media (max-width: 576px) {
  #hero { padding: 80px 0 70px; text-align: center; }
  #hero h1 { font-size: 30px; }
  #hero h2 { font-size: 15px; max-width: 100%; }
  #hero .btn-get-started { padding: 12px 28px; font-size: 14px; }
  #hero .hero-img img { margin-top: 30px; border-radius: 22px; transform: none; }
}

/* ================= HERO FIX ================= */
@media (max-width: 576px) {
  #hero .hero-img img { transform: none !important; }
}

/* ================= PRICING FIX ================= */
@media (hover: none) {
  #pricing .box:hover { transform: none !important; }
  #pricing .btn-buy:hover { transform: none !important; }
}

/* ================= FEATURES FIX ================= */
#features .feature-box { max-width: 100%; overflow: hidden; }

/* ================= SERVICES FIX ================= */
@media (hover: none) {
  #services .service-box:hover { transform: none !important; }
}

/* ================= COUNTS FIX ================= */
@media (hover: none) {
  #counts .count-box:hover { transform: none !important; }
}

/* ================= PLATFORM + GATEWAY FIX ================= */
#platforms .swiper,
#gateways .swiper { overflow: hidden !important; }
#platforms .swiper-wrapper,
#gateways .swiper-wrapper { gap: 6px !important; column-gap: 0 !important; }

@media (hover: none) {
  #platforms .swiper-slide img:hover,
  #gateways .swiper-slide img:hover { transform: none !important; }
}

/* ================= FAQ FIX ================= */
#faq .accordion-button { word-break: break-word; }

/* ================= CONTACT FIX ================= */
@media (hover: none) {
  #contact .info-box:hover { transform: none !important; }
}

/* ================= VALUES / WE OFFER SECTION ================= */
#about {
  background: linear-gradient(180deg, #f8fafc, #eef2ff);
  padding: 90px 0;
}
#about .section-header h2 {
  font-size: 34px; font-weight: 900; text-align: center; color: #0f172a;
}
#about .section-header p {
  font-size: 16px; color: #475569; text-align: center; margin-bottom: 40px;
}
#about .box {
  background: #ffffff;
  border-radius: 24px;
  padding: 26px 22px 30px;
  text-align: center;
  height: 100%;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.14);
  border: 1px solid rgba(226, 232, 240, 0.95);
  transition: 0.25s ease;
  position: relative;
  overflow: hidden;
}
#about .box::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at top, rgba(37, 99, 235, 0.14), transparent 70%);
  opacity: 0; transition: 0.25s;
}
#about .box:hover::before { opacity: 1; }
#about .box:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 75px rgba(15, 23, 42, 0.25);
}
#about .box img {
  max-height: 130px; width: auto;
  margin-bottom: 18px; object-fit: contain;
  border-radius: 22px; padding: 10px;
  background: #f8fafc;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
  transition: 0.25s ease;
  position: relative; z-index: 2;
}
#about .box:hover img {
  transform: scale(1.08) rotate(-1deg);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.20);
}
#about .box h3 {
  position: relative; z-index: 2;
  font-size: 18px; font-weight: 800; color: #0f172a; margin-bottom: 8px;
}
#about .box p {
  position: relative; z-index: 2;
  font-size: 14px; color: #475569; line-height: 1.7; margin: 0;
}

@media (max-width: 991px) {
  #about { padding: 70px 0; }
  #about .section-header h2 { font-size: 28px; }
}
@media (max-width: 576px) {
  #about { padding: 60px 0; }
  #about .box { border-radius: 20px; padding: 22px 18px 26px; }
  #about .box img { max-height: 100px; border-radius: 18px; padding: 8px; }
  #about .box h3 { font-size: 16px; }
  #about .box p { font-size: 13.5px; }
}

/* ================= COUNTS SECTION ================= */
#counts {
  background: linear-gradient(180deg, #f8fafc, #eef2ff);
  padding: 80px 0;
}
#counts .count-box {
  background: #ffffff; border-radius: 24px;
  padding: 22px 18px; text-align: left;
  position: relative; overflow: hidden; height: 100%;
  display: flex; align-items: center; gap: 14px;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.16);
  border: 1px solid rgba(226, 232, 240, 0.9);
  transition: 0.25s ease;
}
#counts .count-box::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at top left, rgba(59, 130, 246, 0.18), transparent 60%);
  opacity: 0; transition: 0.25s;
}
#counts .count-box:hover::before { opacity: 1; }
#counts .count-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 70px rgba(15, 23, 42, 0.25);
}
#counts .count-box i {
  position: relative; z-index: 2;
  font-size: 26px; width: 56px; height: 56px;
  border-radius: 18px; display: flex;
  align-items: center; justify-content: center;
  background: linear-gradient(135deg, #2563eb, #0ea5e9);
  color: #ffffff;
  box-shadow: 0 14px 32px rgba(37, 99, 235, 0.55);
}
#counts .count-box span {
  position: relative; z-index: 2; display: block;
  font-size: 26px; font-weight: 800; color: #0f172a; line-height: 1.1;
}
#counts .count-box p {
  position: relative; z-index: 2;
  margin: 4px 0 0; font-size: 13px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.06em; color: #64748b;
}

@media (max-width: 991px) { #counts { padding: 60px 0; } }
@media (max-width: 576px) {
  #counts .count-box { padding: 18px 16px; border-radius: 18px; }
  #counts .count-box span { font-size: 22px; }
  #counts .count-box p { font-size: 12px; }
  #counts .count-box i { width: 50px; height: 50px; font-size: 22px; }
}

/* ================= FEATURES SECTION ================= */
#features { background: #f8fafc; padding: 80px 0; }
#features .section-header h2 { font-size: 34px; font-weight: 900; color: #0f172a; }
#features .section-header p { font-size: 16px; color: #475569; }
#features .feature-image-wrapper {
  background: #ffffff; border-radius: 24px; padding: 14px;
  box-shadow: 0 22px 55px rgba(15, 23, 42, 0.18);
}
#features .feature-image-wrapper img {
  border-radius: 18px; width: 100%; height: auto; display: block;
}
#features .feature-box {
  background: #ffffff; border-radius: 999px;
  padding: 10px 16px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.10);
  font-size: 14px; color: #0f172a;
  margin-bottom: 10px; transition: 0.2s ease;
}
#features .feature-box i { font-size: 18px; margin-right: 8px; color: #2563eb; }
#features .feature-box h3 { font-size: 14px; font-weight: 600; margin: 0; }
#features .feature-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.20);
}

@media (max-width: 991px) {
  #features { padding: 60px 0; }
  #features .section-header h2 { font-size: 28px; }
  #features .section-header p { font-size: 15px; }
  #features .feature-image-wrapper { margin-bottom: 24px; }
}
@media (max-width: 575px) {
  #features .feature-box { border-radius: 16px; }
}

/* ================= SERVICES SECTION ================= */
#services {
  background: linear-gradient(180deg, #f8fafc, #eef2ff);
  padding: 80px 0;
}
#services .section-header h2 { font-size: 36px; font-weight: 900; color: #0f172a; }
#services .section-header p { font-size: 17px; color: #475569; }
#services .service-box {
  background: #ffffff; border-radius: 20px;
  padding: 24px 20px; height: 100%;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
  transition: .3s; text-align: center;
}
#services .service-box:hover {
  transform: translateY(-8px);
  box-shadow: 0 35px 80px rgba(0, 0, 0, 0.22);
}
#services .service-box .icon {
  font-size: 28px; width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  background: linear-gradient(135deg, #2563eb, #0ea5e9); color: #fff;
}
#services .service-box h3 { font-size: 20px; font-weight: 800; color: #0f172a; margin-bottom: 10px; }
#services .service-box p { font-size: 14.5px; color: #475569; line-height: 1.7; }

@media (max-width: 768px) {
  #services { padding: 60px 0; }
  #services .section-header h2 { font-size: 30px; }
  #services .section-header p { font-size: 15px; }
  #services .service-box { padding: 20px 18px; }
  #services .service-box h3 { font-size: 18px; }
  #services .service-box p { font-size: 13.5px; }
}

/* ================= PRICING SECTION ================= */
#pricing {
  background: linear-gradient(180deg, #f8fafc, #eef2ff);
  padding: 90px 0;
}
#pricing .section-header h2 { font-size: 42px; font-weight: 900; }
#pricing .section-header p { color: #475569; font-size: 18px; margin-top: 10px; font-weight: 500; }
#pricing .box {
  background: linear-gradient(145deg, #ffffff, #f1f5ff);
  border-radius: 22px; padding: 26px 22px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.14);
  height: 100%; display: flex; flex-direction: column;
  position: relative; overflow: hidden; transition: all 0.25s ease;
}
#pricing .box::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(37, 99, 235, 0.08), rgba(14, 165, 233, 0.08));
  opacity: 0; transition: 0.25s;
}
#pricing .box:hover::before { opacity: 1; }
#pricing .box:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 35px 80px rgba(15, 23, 42, 0.25);
}
#pricing .box h3 {
  font-size: 22px; font-weight: 800; text-align: center;
  color: #0f172a; margin-bottom: 14px; position: relative; z-index: 2;
}
#pricing .price {
  font-size: 32px; font-weight: 900; text-align: center;
  color: #2563eb; position: relative; z-index: 2;
}
#pricing .price span { font-size: 13px; font-weight: 500; color: #475569; }
#pricing p { font-size: 14px; color: #475569; margin-top: 12px; position: relative; z-index: 2; }
#pricing ul {
  list-style: none; padding: 0; margin: 22px 0 26px;
  position: relative; z-index: 2;
}
#pricing ul li {
  font-size: 14px; color: #1e293b; padding: 8px 0;
  display: flex; gap: 10px; align-items: flex-start;
}
#pricing ul li::before { content: "✔"; color: #16a34a; font-size: 14px; margin-top: 2px; }
#pricing .btn-buy {
  margin-top: auto; text-align: center; display: inline-block;
  width: 100%; padding: 12px 0; border-radius: 999px;
  font-size: 14px; font-weight: 700; color: #ffffff;
  background: linear-gradient(120deg, #2563eb, #0ea5e9);
  box-shadow: 0 16px 40px rgba(37, 99, 235, 0.45);
  text-decoration: none; transition: 0.25s; position: relative; z-index: 2;
}
#pricing .btn-buy:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 55px rgba(37, 99, 235, 0.65);
}

@media (max-width: 991px) {
  #pricing .section-header h2 { font-size: 34px; }
  #pricing .section-header p { font-size: 16px; }
}
@media (max-width: 576px) {
  #pricing .section-header h2 { font-size: 28px; }
  #pricing .section-header p { font-size: 14px; }
}

/* ================= SUPPORTED PLATFORMS ================= */
#platforms {
  background: linear-gradient(180deg, #f8fafc, #eef2ff);
  padding: 70px 0;
}
#platforms .section-header p {
  font-size: 30px; font-weight: 900; text-align: center;
  color: #0f172a; margin-bottom: 26px;
}
#platforms .swiper-wrapper { column-gap: 6px; }
#platforms .swiper-slide {
  display: flex; align-items: center; justify-content: center; padding: 4px;
}
#platforms .swiper-slide img {
  max-width: 180px; max-height: 100px; object-fit: contain;
  background: #ffffff; padding: 8px; border-radius: 20px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16); transition: 0.25s ease;
}
#platforms .swiper-slide img:hover {
  transform: scale(1.06);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.25);
}

@media (max-width: 576px) {
  #platforms { padding: 50px 0; }
  #platforms .section-header p { font-size: 22px; margin-bottom: 18px; }
  #platforms .swiper-slide { padding: 3px; }
  #platforms .swiper-slide img { max-width: 140px; max-height: 70px; padding: 6px; border-radius: 14px; }
}

/* ================= FAQ SECTION ================= */
#faq {
  background: linear-gradient(180deg, #eef2ff, #f8fafc);
  padding: 80px 0;
}
#faq .section-header h2 { font-size: 34px; font-weight: 900; color: #0f172a; text-align: center; }
#faq .section-header p { font-size: 16px; color: #475569; text-align: center; }
#faq .accordion { background: transparent; }
#faq .accordion-item {
  border: none; margin-bottom: 14px; border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
  background: #ffffff;
}
#faq .accordion-button {
  background: #ffffff; color: #0f172a;
  font-weight: 600; font-size: 15px; padding: 14px 18px;
}
#faq .accordion-button::after { filter: none; }
#faq .accordion-button.collapsed { box-shadow: none; }
#faq .accordion-body { font-size: 14px; line-height: 1.7; color: #475569; padding: 14px 18px 18px; }
#faq .accordion-item:last-of-type,
#faq .accordion-item:first-of-type { border-radius: 18px; }

@media (max-width: 991px) {
  #faq { padding: 60px 0; }
  #faq .section-header h2 { font-size: 28px; }
  #faq .section-header p { font-size: 15px; }
}
@media (max-width: 576px) {
  #faq .accordion-item { border-radius: 14px; box-shadow: 0 14px 28px rgba(15, 23, 42, 0.16); }
  #faq .accordion-button { font-size: 14px; }
  #faq .accordion-body { font-size: 13.5px; }
}

/* ================= SUPPORTED GATEWAYS ================= */
#gateways {
  background: linear-gradient(180deg, #f8fafc, #eef2ff);
  padding: 80px 0;
}
#gateways .section-header p {
  font-size: 30px; font-weight: 900; text-align: center;
  color: #0f172a; margin-bottom: 26px;
}
#gateways .swiper-wrapper { column-gap: 6px; }
#gateways .swiper-slide {
  display: flex; align-items: center; justify-content: center; padding: 6px;
}
#gateways .swiper-slide img {
  max-width: 170px; max-height: 90px; object-fit: contain;
  background: #ffffff; padding: 12px 16px; border-radius: 22px;
  box-shadow: 0 16px 35px rgba(15, 23, 42, 0.15);
  border: 1px solid rgba(203, 213, 225, 0.9);
  transition: 0.25s ease; opacity: 1;
}
#gateways .swiper-slide img:hover {
  transform: scale(1.06) translateY(-2px);
  box-shadow: 0 24px 55px rgba(15, 23, 42, 0.25);
}
#gateways .swiper-pagination { margin-top: 16px; }
#gateways .swiper-pagination-bullet { width: 8px; height: 8px; margin: 0 3px; background: #94a3b8; opacity: 1; }
#gateways .swiper-pagination-bullet-active { background: #2563eb; }

@media (max-width: 576px) {
  #gateways { padding: 60px 0; }
  #gateways .section-header p { font-size: 22px; margin-bottom: 18px; }
  #gateways .swiper-slide img { max-width: 140px; max-height: 70px; padding: 8px 10px; border-radius: 18px; }
  #gateways .swiper-pagination { display: none !important; }
}

/* ================= CONTACT SECTION ================= */
#contact {
  background: linear-gradient(180deg, #eef2ff, #f8fafc);
  padding: 90px 0;
}
#contact .section-header p {
  font-size: 32px; font-weight: 900; text-align: center;
  color: #0f172a; margin-bottom: 40px;
}
#contact .info-box {
  background: #ffffff; padding: 28px 22px; border-radius: 22px;
  text-align: center; height: 100%;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.15);
  border: 1px solid rgba(203, 213, 225, 0.9);
  transition: 0.25s ease;
}
#contact .info-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 60px rgba(15, 23, 42, 0.25);
}
#contact .info-box i {
  font-size: 32px; width: 64px; height: 64px; line-height: 64px;
  border-radius: 50%; color: #ffffff;
  background: linear-gradient(120deg, #2563eb, #0ea5e9);
  display: inline-block; margin-bottom: 14px;
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.45);
}
#contact .info-box h3 { font-size: 18px; font-weight: 800; color: #0f172a; margin-bottom: 6px; }
#contact .info-box p { font-size: 14px; color: #475569; line-height: 1.6; margin: 0; }

@media (max-width: 991px) {
  #contact { padding: 70px 0; }
  #contact .section-header p { font-size: 26px; margin-bottom: 28px; }
}
@media (max-width: 576px) {
  #contact { padding: 60px 0; }
  #contact .section-header p { font-size: 22px; }
  #contact .info-box { padding: 22px 18px; border-radius: 18px; }
  #contact .info-box i { width: 56px; height: 56px; line-height: 56px; font-size: 26px; }
  #contact .info-box h3 { font-size: 16px; }
  #contact .info-box p { font-size: 13.5px; }
}