/* =========================================================
   GEKAWA — Site-wide brand colors + footer polish.
   Loaded on EVERY frontend page (linked from layouts/main.blade.php)
   so the corporate violet is consistent everywhere, not just home.
   Does not touch the admin panel or any backend logic.
   ========================================================= */

:root {
  --gk-violet-900: #180B33;
  --gk-violet-700: #3B1A7A;
  --gk-violet-600: #5B21B6;
  --gk-violet-500: #6E3BF6;
  --gk-violet-400: #8B5CF6;
  --gk-violet-100: #F3EEFF;
  --gk-cyan-500: #06B6D4;
  --gk-cyan-400: #22D3EE;
  --gk-ink: #0F0B1F;
  --gk-text: #574F66;
  --gk-border: #EAE4FB;
  --gk-surface: #FBFAFF;

  --tp-theme-1: var(--gk-violet-500);
  --tp-theme-2: var(--gk-cyan-500);
  --tp-theme-3: var(--gk-violet-500);
  --tp-heading-primary: var(--gk-ink);
  --tp-text-body: var(--gk-text);
}

/* ---------- Base helpers (shared design system) ---------- */
.gk-container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.gk-section { padding: 100px 0; }
.gk-section--tight { padding: 70px 0; }
.gk-section--light { background: var(--gk-surface); }
/* Two light sections back to back (e.g. pricing -> faq) share the same
   background with no visual break, so the combined top+bottom padding
   reads as one big empty gap. Trim it when that happens. */
.gk-section--light + .gk-section--light {
  padding-top: 20px;
}
.gk-section--dark { background: var(--gk-ink); color: #fff; }
.gk-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gk-violet-500);
  background: var(--gk-violet-100);
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.gk-section--dark .gk-kicker,
.gk-kicker--invert {
  background: rgba(255,255,255,.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
}
.gk-h2 {
  font-family: var(--tp-ff-heading);
  font-size: 42px;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--gk-ink);
  margin-bottom: 18px;
}
.gk-section--dark .gk-h2 { color: #fff; }
.gk-lead {
  font-size: 17px;
  line-height: 1.7;
  color: var(--gk-text);
  max-width: 560px;
}
.gk-section--dark .gk-lead { color: rgba(255,255,255,.72); }
.gk-head {
  max-width: 680px;
  margin: 0 auto 60px;
  text-align: center;
}
.gk-head .gk-lead { margin: 0 auto; }
.gk-grad-text {
  background: linear-gradient(90deg, var(--gk-violet-400), var(--gk-cyan-400));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (max-width: 991px) {
  .gk-section { padding: 70px 0; }
  .gk-h2 { font-size: 30px; }
}
@media (max-width: 575px) {
  .gk-section { padding: 50px 0; }
  .gk-section--tight { padding: 40px 0; }
  .gk-h2 { font-size: 24px; }
  .gk-lead { font-size: 15px; }
  .gk-container { padding: 0 18px; }
}

/* ---------- Buttons ---------- */
.gk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 30px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  white-space: nowrap;
}
.gk-btn--primary {
  background: linear-gradient(90deg, var(--gk-violet-500), var(--gk-violet-600));
  color: #fff;
  box-shadow: 0 14px 30px rgba(110,59,246,.35);
}
.gk-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(110,59,246,.45); color: #fff; }
.gk-btn--pulse { animation: gkBtnPulse 2.2s ease-out infinite; }
.gk-btn--pulse:hover { animation-play-state: paused; }
@keyframes gkBtnPulse {
  0% { box-shadow: 0 0 0 0 rgba(110,59,246,.6), 0 14px 30px rgba(110,59,246,.35); }
  70% { box-shadow: 0 0 0 10px rgba(110,59,246,0), 0 14px 30px rgba(110,59,246,.35); }
  100% { box-shadow: 0 0 0 0 rgba(110,59,246,0), 0 14px 30px rgba(110,59,246,.35); }
}
@media (prefers-reduced-motion: reduce) { .gk-btn--pulse { animation: none; } }
.gk-btn--ghost {
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
}
.gk-btn--ghost:hover { background: rgba(255,255,255,.16); color: #fff; transform: translateY(-2px); }
.gk-btn--outline {
  background: #fff;
  color: var(--gk-violet-600);
  border: 1.5px solid var(--gk-border);
}
.gk-btn--outline:hover { border-color: var(--gk-violet-500); color: var(--gk-violet-600); transform: translateY(-2px); }
.gk-btn--block { width: 100%; }

/* ===========================================================
   NAVBAR (shared by header-1 on home and header-2 elsewhere)
   =========================================================== */
.gk-nav {
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(15,11,31,.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: background .25s ease, box-shadow .25s ease;
}
.gk-nav.header-sticky {
  background: rgba(15,11,31,.88);
  box-shadow: 0 10px 30px rgba(15,11,31,.25);
}
/* Inner pages (header-2) never sit on a dark hero, so they always
   use the solid/scrolled look instead of the half-transparent one
   meant to blend into the home hero's dark gradient. */
.gk-nav--solid {
  background: rgba(15,11,31,.95);
  box-shadow: 0 6px 24px rgba(15,11,31,.18);
}
/* Home nav: float OVER the hero instead of pushing it down, so the
   glass effect actually blends with the hero's dark gradient instead
   of sitting on the plain white body background above it. */
.gk-nav--overlay {
  position: absolute;
  top: 0; left: 0; right: 0;
}
.gk-nav--overlay.header-sticky {
  position: fixed;
}
.gk-nav__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 0; }
.gk-nav__logo img { height: 34px; width: auto; display: block; }
.gk-nav__menu { display: flex; align-items: center; gap: 36px; list-style: none; margin: 0; padding: 0; }
.gk-nav__menu a {
  color: rgba(255,255,255,.82);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: color .2s ease;
  position: relative;
}
.gk-nav__menu a:hover { color: #fff; }
.gk-nav__menu li { position: relative; }
.gk-nav__menu .submenu {
  display: none;
  position: absolute; top: 100%; left: 0;
  background: #1a1330; border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px; padding: 10px; min-width: 200px; list-style: none;
  box-shadow: 0 20px 40px rgba(0,0,0,.35);
  z-index: 10;
}
.gk-nav__menu li:hover .submenu { display: block; }
.gk-nav__menu .submenu li a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 14px; }
.gk-nav__menu .submenu li a:hover { background: rgba(255,255,255,.06); }
.gk-nav__right { display: flex; align-items: center; gap: 14px; }
.gk-nav__burger {
  display: none;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  border-radius: 10px;
  background: rgba(255,255,255,.08);
  color: #fff;
  border: none;
  cursor: pointer;
}
@media (max-width: 991px) {
  .gk-nav__menu { display: none; }
  .gk-nav__burger { display: flex; }
}

/* ===========================================================
   STATS STRIP (shared: home hero + whychoose band)
   =========================================================== */
.gk-stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  overflow: hidden;
  margin-top: 44px;
}
.gk-stats__item { background: rgba(255,255,255,.04); padding: 26px 18px; text-align: center; }
.gk-stats__value { font-size: 32px; font-weight: 700; color: #fff; font-family: var(--tp-ff-heading); }
.gk-stats__label { font-size: 13px; color: rgba(255,255,255,.55); margin-top: 4px; }
@media (max-width: 767px) { .gk-stats { grid-template-columns: 1fr; } }

.gk-stats-band {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, var(--gk-violet-900) 0%, var(--gk-violet-600) 60%, var(--gk-cyan-500) 150%);
}

/* ===========================================================
   Shared motion keyframes (hero blobs + page header)
   =========================================================== */
@keyframes gkBlobFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-30px, 30px) scale(1.08); }
}
@keyframes gkBlobFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(25px, -25px) scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .gk-hero__blob, .gk-pagehead__blob { animation: none !important; }
}

/* ===========================================================
   PAGE HEADER (shared: /pricing, /about, /contact, /faq, /team...)
   Replaces the old light-blue "breadcrumb" banner duplicated
   across ~13 views with one component + one visual language.
   =========================================================== */
.gk-pagehead {
  position: relative;
  overflow: hidden;
  background: radial-gradient(900px 500px at 10% -20%, rgba(110,59,246,.55), transparent 60%),
              radial-gradient(700px 500px at 100% 0%, rgba(6,182,212,.35), transparent 55%),
              var(--gk-ink);
  padding: 72px 0 58px;
  text-align: center;
}
.gk-pagehead__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .5;
  pointer-events: none;
  animation: gkBlobFloat 11s ease-in-out infinite;
}
.gk-pagehead__blob--1 { width: 320px; height: 320px; background: var(--gk-violet-500); top: -120px; left: -60px; }
.gk-pagehead__blob--2 {
  width: 260px; height: 260px; background: var(--gk-cyan-500); bottom: -120px; right: -40px; opacity: .3;
  animation-name: gkBlobFloat2; animation-duration: 14s;
}
.gk-pagehead__crumb {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 14px;
}
.gk-pagehead__crumb a { color: rgba(255,255,255,.75); text-decoration: none; }
.gk-pagehead__crumb a:hover { color: #fff; }
.gk-pagehead__crumb i { font-size: 10px; color: rgba(255,255,255,.4); }
.gk-pagehead__crumb span { color: var(--gk-cyan-400); }
.gk-pagehead__title {
  position: relative;
  z-index: 1;
  font-family: var(--tp-ff-heading);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
}
@media (max-width: 767px) {
  .gk-pagehead { padding: 56px 0 44px; }
  .gk-pagehead__title { font-size: 28px; }
}

/* ===========================================================
   AUTH CARD (login, register, password reset)
   =========================================================== */
.gk-auth-wrap {
  min-height: 62vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gk-auth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 56px;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}
.gk-auth-visual {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: radial-gradient(700px 500px at 15% -10%, rgba(110,59,246,.55), transparent 60%),
              radial-gradient(600px 500px at 100% 100%, rgba(6,182,212,.35), transparent 55%),
              var(--gk-ink);
}
.gk-auth-visual__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .5;
  animation: gkBlobFloat 11s ease-in-out infinite;
}
.gk-auth-visual__blob--1 { width: 260px; height: 260px; background: var(--gk-violet-500); top: -80px; left: -60px; }
.gk-auth-visual__blob--2 {
  width: 220px; height: 220px; background: var(--gk-cyan-500); bottom: -80px; right: -50px; opacity: .3;
  animation-name: gkBlobFloat2; animation-duration: 14s;
}
.chat-mockup { width: 100%; max-width: 280px; height: auto; display: block; margin: 0 auto; }
.gk-auth-visual .chat-mockup { position: relative; z-index: 1; max-width: 230px; filter: drop-shadow(0 25px 50px rgba(0,0,0,.35)); }
.gk-auth-visual__tag {
  position: absolute; z-index: 1; bottom: 36px; left: 0; right: 0;
  text-align: center; color: #fff; font-weight: 600; font-size: 16px; padding: 0 30px;
}
.gk-auth-visual__tag span { display: block; font-weight: 400; font-size: 13px; color: rgba(255,255,255,.6); margin-top: 6px; }
@media (max-width: 991px) {
  .gk-auth-grid { grid-template-columns: 1fr; max-width: 460px; }
  .gk-auth-visual { display: none; }
}
.gk-auth-card {
  background: #fff;
  border: 1px solid var(--gk-border);
  border-radius: 24px;
  padding: 56px 48px;
  box-shadow: 0 25px 60px rgba(15,11,31,.1);
  width: 100%;
}
.gk-auth-card .gk-input { padding: 17px 18px; font-size: 15.5px; }
@media (max-width: 575px) {
  .gk-auth-card { padding: 40px 26px; }
}
.gk-auth-card__icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: linear-gradient(135deg, var(--gk-violet-500), var(--gk-cyan-500));
  color: #fff; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
}
.gk-auth-label { display: block; font-size: 13.5px; font-weight: 600; color: var(--gk-ink); margin-bottom: 8px; }
.gk-auth-error { display: block; color: #ef4444; font-size: 12.5px; margin-top: 6px; }
.gk-auth-row { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 26px; flex-wrap: wrap; gap: 10px; }
.gk-auth-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--gk-text); cursor: pointer; }
.gk-auth-link { font-size: 13.5px; color: var(--gk-violet-600); text-decoration: none; font-weight: 500; }
.gk-auth-link:hover { text-decoration: underline; }
.gk-auth-foot { text-align: center; font-size: 13.5px; color: var(--gk-text); margin: 22px 0 0; }
.gk-auth-foot a { color: var(--gk-violet-600); font-weight: 600; text-decoration: none; }
.gk-auth-foot a:hover { text-decoration: underline; }

/* ===========================================================
   FORM (contact page)
   =========================================================== */
.gk-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.gk-input {
  width: 100%;
  border: 1.5px solid var(--gk-border);
  background: #fff;
  border-radius: 12px;
  padding: 16px 18px;
  font-size: 14.5px;
  color: var(--gk-ink);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.gk-input::placeholder { color: #A8A2B8; }
.gk-input:focus { outline: none; border-color: var(--gk-violet-500); box-shadow: 0 0 0 4px rgba(110,59,246,.12); }
.gk-input.is-invalid { border-color: #ef4444; }
.gk-textarea { min-height: 160px; resize: vertical; margin-bottom: 24px; display: block; }
@media (max-width: 767px) { .gk-form-row { grid-template-columns: 1fr; } }

/* ===========================================================
   PRICING cards (shared component: /pricing, /about, /features)
   =========================================================== */
.gk-pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: stretch; }
.gk-plan {
  background: #fff;
  border: 1px solid var(--gk-border);
  border-radius: 20px;
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease;
}
.gk-plan:hover { transform: translateY(-6px); }
.gk-plan--active { border-color: var(--gk-violet-500); box-shadow: 0 25px 55px rgba(91,33,182,.22); }
.gk-plan__badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(90deg, var(--gk-violet-500), var(--gk-cyan-500));
  color: #fff; font-size: 12px; font-weight: 700;
  padding: 6px 16px; border-radius: 999px; white-space: nowrap;
}
.gk-plan__icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gk-violet-100); color: var(--gk-violet-600);
  margin-bottom: 18px; font-size: 18px;
}
.gk-plan__title { font-size: 15px; font-weight: 600; color: var(--gk-text); margin-bottom: 6px; }
.gk-plan__price { font-size: 36px; font-weight: 700; color: var(--gk-ink); font-family: var(--tp-ff-heading); margin-bottom: 20px; }
.gk-plan__price small { font-size: 14px; font-weight: 500; color: var(--gk-text); }
.gk-plan__list { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 12px; flex: 1; }
.gk-plan__list li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--gk-ink); }
.gk-plan__list i { color: var(--gk-violet-500); font-size: 13px; flex: none; }
@media (max-width: 991px) {
  .gk-pricing { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
}
@media (max-width: 575px) {
  .gk-plan { padding: 28px 22px; }
  .gk-plan__price { font-size: 30px; }
}

/* ===========================================================
   FAQ accordion (shared component)
   =========================================================== */
.gk-faq { max-width: 820px; margin: 0 auto; display: grid; gap: 14px; }
.gk-faq__item {
  background: #fff;
  border: 1px solid var(--gk-border);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.gk-faq__item:hover { border-color: var(--gk-violet-400); box-shadow: 0 12px 30px rgba(91,33,182,.08); }
.gk-faq__item:has(.gk-faq__q[aria-expanded="true"]) {
  border-color: var(--gk-violet-500);
  box-shadow: 0 16px 36px rgba(91,33,182,.12);
}
.gk-faq__q {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 24px; font-size: 15.5px; font-weight: 600; color: var(--gk-ink);
}
.gk-faq__q-icon {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--gk-violet-100); color: var(--gk-violet-600);
  transition: transform .25s ease, background .2s ease, color .2s ease;
}
.gk-faq__q-icon i { transition: transform .25s ease; }
.gk-faq__q[aria-expanded="true"] .gk-faq__q-icon {
  background: linear-gradient(135deg, var(--gk-violet-500), var(--gk-cyan-500));
  color: #fff;
  transform: rotate(135deg);
}
.gk-faq__a { padding: 0 24px 24px; font-size: 14.5px; color: var(--gk-text); line-height: 1.7; }

/* ---------- Footer ---------- */
.tp-footer__area.theme-bg {
  background: linear-gradient(120deg, #180B33 0%, #5B21B6 55%, #06B6D4 150%) !important;
  padding-top: 90px !important;
}
.tp-footer__content h3 {
  font-size: 32px !important;
  font-weight: 700 !important;
}
.tp-footer__content p {
  color: rgba(255,255,255,.72) !important;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
.gk-footer__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 34px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  background: #fff;
  color: #5B21B6;
  box-shadow: 0 14px 30px rgba(0,0,0,.2);
  transition: transform .2s ease, box-shadow .2s ease;
}
.gk-footer__cta:hover { transform: translateY(-2px); color: #5B21B6; }

.tp-footer-bottom__border-top {
  border-top: 1px solid rgba(255,255,255,.15) !important;
}
.tp-footer-bottom__menu ul { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.tp-footer-bottom__menu a {
  color: rgba(255,255,255,.75);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: color .2s ease;
}
.tp-footer-bottom__menu a:hover { color: #fff; }
.gk-footer-copy {
  color: rgba(255,255,255,.55);
  font-size: 13px;
}