/* GCO Website Custom CSS */
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Playfair+Display:ital@1&family=Plus+Jakarta+Sans:wght@500&display=swap');

html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; overflow-x: hidden; max-width: 100vw; }

/* Container override */
html body .container { width: 100% !important; max-width: 1280px !important; margin: 0 auto !important; padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
@media (min-width: 640px) { .container { padding-left: 2rem; padding-right: 2rem; } }

/* Section tagline */
.section-tagline {
  display: block;
  margin-bottom: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.3;
  color: #5d6167;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
}
.dark .section-tagline { color: #A1A49D; }

/* BTN */
.btn {
  position: relative;
  z-index: 0;
  overflow: hidden;
  border-radius: 30px;
  padding: 13px 30px;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5rem;
  letter-spacing: -0.3px;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s;
}
.btn::before {
  position: absolute; bottom: 0; left: 0; z-index: -10;
  height: 100%; width: 100%; transform-origin: right; transform: scaleX(0);
  border-radius: 30px; background-color: rgb(42,0,124);
  transition: transform 500ms; content: "";
}
.btn::after {
  position: absolute; left: 0; top: 0; z-index: -20;
  height: 100%; width: 100%; border-radius: 30px;
  background-color: rgb(254,90,1); content: "";
}
.btn:hover { color: #fff; }
.btn:hover::before { transform-origin: left; transform: scaleX(1); content: ""; }
.dark .btn { color: #18181b; }
.dark .btn::before { background-color: rgb(44,0,126); content: ""; }
.dark .btn::after { background-color: #FFC107; content: ""; }
.dark .btn:hover { color: #18181b; }

/* BTN OUTLINE */
.btn-outline {
  position: relative; z-index: 10; overflow: hidden;
  border-radius: 30px; border: 1px solid rgb(237 240 230);
  background-color: #fff; padding: 13px 30px;
  font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 500;
  line-height: 1.5rem; letter-spacing: -0.3px; color: #18181b;
  transition: all 500ms; display: inline-flex; align-items: center;
  justify-content: center; cursor: pointer; text-decoration: none;
}
.btn-outline::before {
  position: absolute; bottom: 0; left: 0; z-index: -10;
  height: 100%; width: 100%; transform-origin: right; transform: scaleX(0);
  border-radius: 30px; background-color: #18181b;
  transition: transform 500ms; content: "";
}
.btn-outline:hover { color: #fff; transition: all 500ms; }
.btn-outline:hover::before { transform-origin: left; transform: scaleX(1); content: ""; }
.dark .btn-outline { border-color: rgb(49 51 48); background-color: transparent; color: #fff; }
.dark .btn-outline::before { background-color: #FFC107; content: ""; }
.dark .btn-outline:hover { color: #18181b; }

/* Nav sticky */
.nav-sticky {
  top: 0; padding-top: 0.375rem; padding-bottom: 0.375rem;
  backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);
  transition: all 500ms; margin: 0;
}

/* Mobile menu */
.mobile-menu {
  position: fixed; right: 0; top: 0; z-index: 111111;
  margin-left: auto; margin-right: auto;
  display: flex; height: 100vh; width: 100%;
  transform: translateX(100%); align-items: center;
  border-radius: 0; background-color: #B1E346;
  padding: 0.625rem 2.5rem; box-shadow: 0px 0px 30px rgba(0,0,0,0.05);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: transform 150ms cubic-bezier(0.4,0,0.2,1);
}
.dark .mobile-menu { background-color: rgb(19 20 16); }
.mobile-menu.open { transform: translateX(0); }

/* Nav active state */
.active {
  border-color: rgb(237 240 230);
  background-color: #fff;
}
.dark .active {
  border-color: rgba(237,240,230,0.1);
  background-color: rgb(33 34 32);
}

/* Social link hover */
.social-link li a:hover svg path { fill: #B1E346; transition: all 300ms; }
.social-link li svg path { fill: #18181b; transition: all 300ms; }
.dark .social-link li svg path { fill: #fff; }

/* Price month */
.price-month h2 { font-size: 42px; font-weight: 700; color: #18181b; }
.dark .price-month h2 { color: #fff; }
.price-month p { font-size: 0.875rem; color: #5d6167; margin-top: 4px; }

/* FAQ */
.faq-body { transition: max-height 300ms ease, opacity 300ms ease; }

/* Counter */
.counterTrusted { color: #FFC107; font-size: 28px; font-weight: 700; }

/* After/before borders (member-border) */
#counter_trusted .container > div::before,
#counter_trusted .container > div::after {
  background-image: url('/images/member-border.svg');
  background-repeat: no-repeat;
  background-size: cover;
}
.dark #counter_trusted .container > div::before,
.dark #counter_trusted .container > div::after {
  background-image: url('/images/member-border-dark.svg');
}

/* Landscape height fix */
@media (orientation: landscape) and (max-width: 1024px) {
  .landscape\:h-full { height: 100%; }
}

/* Line clamp */
.line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.line-clamp-3 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }

/* Prose for blog detail */
.prose h2 { font-size: 1.5rem; font-weight: 700; margin-top: 2rem; margin-bottom: 1rem; }
.prose h3 { font-size: 1.25rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.75rem; }
.prose p { margin-bottom: 1rem; line-height: 1.75; }
.prose ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
.prose ol { list-style: decimal; padding-left: 1.5rem; margin-bottom: 1rem; }
.prose li { margin-bottom: 0.5rem; }
.prose a { color: #FFC107; text-decoration: underline; }
.prose img { max-width: 100%; border-radius: 8px; margin: 1rem 0; }

/* AOS initial state */
[data-aos] { opacity: 0; transition-property: opacity, transform; transition-duration: 1000ms; transition-timing-function: ease; }
[data-aos].aos-animate { opacity: 1; transform: none; }
[data-aos="fade-up"] { transform: translateY(30px); }
[data-aos="fade-up"].aos-animate { transform: translateY(0); }
[data-aos="fade-left"] { transform: translateX(50px); }
[data-aos="fade-left"].aos-animate { transform: translateX(0); }