/*
 * Public site (Blade). --be-primary ("r g b") comes from
 * Admin > Appearance > Themes (default light theme).
 */
:root {
  --be-primary: 13 110 253;
  --landing-accent: #6610f2;
  --landing-ink: #101828;
  --landing-muted: #f5f7fb;
  --landing-border: #e6e9f0;
  --landing-footer: #0f1729;
  --bs-primary: rgb(var(--be-primary));
  --bs-link-color: rgb(var(--be-primary));
  --bs-link-hover-color: rgb(var(--be-primary) / .8);
  --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bs-body-color: #344054;
}
body.landing { background: #fff; color: var(--bs-body-color); }
a { color: rgb(var(--be-primary)); }
a:hover { color: rgb(var(--be-primary) / .8); }
h1, h2, h3, h4, h5, h6 { color: var(--landing-ink); }

/* Theme-coloured Bootstrap utilities */
.btn-primary {
  --bs-btn-bg: rgb(var(--be-primary));
  --bs-btn-border-color: rgb(var(--be-primary));
  --bs-btn-hover-bg: rgb(var(--be-primary) / .88);
  --bs-btn-hover-border-color: rgb(var(--be-primary) / .88);
  --bs-btn-active-bg: rgb(var(--be-primary) / .78);
  --bs-btn-active-border-color: rgb(var(--be-primary) / .78);
  --bs-btn-disabled-bg: rgb(var(--be-primary));
  --bs-btn-disabled-border-color: rgb(var(--be-primary));
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
}
.btn-outline-primary {
  --bs-btn-color: rgb(var(--be-primary));
  --bs-btn-border-color: rgb(var(--be-primary));
  --bs-btn-hover-bg: rgb(var(--be-primary));
  --bs-btn-hover-border-color: rgb(var(--be-primary));
  --bs-btn-active-bg: rgb(var(--be-primary));
  --bs-btn-active-border-color: rgb(var(--be-primary));
  --bs-btn-disabled-color: rgb(var(--be-primary));
  --bs-btn-disabled-border-color: rgb(var(--be-primary));
}
.text-primary { color: rgb(var(--be-primary) / var(--bs-text-opacity, 1)) !important; }
.bg-primary { background-color: rgb(var(--be-primary) / var(--bs-bg-opacity, 1)) !important; }
.border-primary { border-color: rgb(var(--be-primary)) !important; }
.btn-gradient {
  background: linear-gradient(90deg, rgb(var(--be-primary)), var(--landing-accent));
  color: #fff;
  border: none;
}
.btn-gradient:hover { color: #fff; filter: brightness(1.05); }

.skip-link { position: absolute; left: 1rem; top: .5rem; z-index: 2000; background: #fff; padding: .5rem 1rem; border-radius: .5rem; }

/* ------------------------------------------------------------------ */
/* Header                                                              */
/* ------------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.site-header.is-scrolled { border-bottom-color: var(--landing-border); box-shadow: 0 4px 20px rgba(16, 24, 40, .06); }
.site-navbar { padding-top: .75rem; padding-bottom: .75rem; }
.site-navbar .navbar-brand img { max-height: 36px; width: auto; }
.site-navbar .nav-link {
  font-weight: 500;
  color: #344054;
  padding: .5rem .9rem !important;
  border-radius: 999px;
  transition: color .15s ease, background-color .15s ease;
}
.site-navbar .nav-link:hover,
.site-navbar .nav-link.active { color: rgb(var(--be-primary)); background: rgb(var(--be-primary) / .07); }
.site-navbar .nav-login { color: var(--landing-ink); font-weight: 600; text-decoration: none; }
.site-navbar .nav-login:hover { color: rgb(var(--be-primary)); }
.auth-buttons .btn { font-weight: 600; }
.dropdown-menu { border-radius: .75rem; min-width: 220px; padding: .5rem; border-color: var(--landing-border); box-shadow: 0 12px 32px rgba(16, 24, 40, .12); }
.dropdown-item { border-radius: .5rem; padding: .5rem .75rem; }
.dropdown-item:hover { background-color: rgb(var(--be-primary) / .08); color: rgb(var(--be-primary)); }
@media (max-width: 991.98px) {
  .site-navbar .navbar-collapse { padding: .75rem 0 1rem; }
  .site-navbar .nav-link { border-radius: .5rem; }
}

/* ------------------------------------------------------------------ */
/* Sections                                                            */
/* ------------------------------------------------------------------ */
.section { padding: 80px 0; }
.section-muted { background: var(--landing-muted); }
.section-head { margin-bottom: 2.5rem; }
.section-title { font-weight: 800; font-size: clamp(1.6rem, 2.6vw, 2.25rem); letter-spacing: -.02em; margin-bottom: .75rem; }
.section-subtitle { color: #667085; font-size: 1.125rem; max-width: 680px; margin-left: auto; margin-right: auto; }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; font-weight: 700; color: rgb(var(--be-primary)); }
@media (max-width: 767.98px) { .section { padding: 56px 0; } }

/* Hero */
.hero {
  padding: 96px 0 104px;
  overflow: hidden;
  position: relative;
  /* Admin > Appearance > Landing page > hero colours */
  background: linear-gradient(135deg, var(--hero-c1, #7494c3) 0%, var(--hero-c2, #6610f2) 100%);
  color: #fff;
}
.hero::after {
  content: '';
  position: absolute;
  inset: auto -10% -45% -10%;
  height: 70%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .18), transparent);
  pointer-events: none;
}
.hero-title { color: #fff; font-weight: 800; font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.1; letter-spacing: -.03em; margin-bottom: 1.25rem; }
.hero-subtitle { color: rgba(255, 255, 255, .9); font-size: 1.2rem; margin-bottom: 2rem; max-width: 560px; }
.hero .col-lg-6.text-lg-start .hero-subtitle { margin-left: auto; margin-right: auto; }
@media (min-width: 992px) { .hero .col-lg-6.text-lg-start .hero-subtitle { margin-left: 0; } }
.hero-points li { color: rgba(255, 255, 255, .92); font-weight: 500; font-size: .95rem; }
.hero-points i { margin-right: .35rem; }
.hero-img { max-width: 88%; }
.floating { animation: floatCloud 6s ease-in-out infinite alternate; }
@keyframes floatCloud { from { transform: translateY(0); } to { transform: translateY(-16px); } }
@media (prefers-reduced-motion: reduce) { .floating { animation: none; } }
.hero-footer { background: linear-gradient(135deg, var(--hero-c1, #7494c3) 0%, var(--hero-c2, #6610f2) 100%); }
.hero-footer h2 { color: #fff; }

/* Feature tiles */
.feature-tile {
  background: #fff;
  border: 1px solid var(--landing-border);
  border-radius: 1rem;
  padding: 1.5rem 1.25rem;
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.feature-tile:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(16, 24, 40, .08); border-color: rgb(var(--be-primary) / .3); }
.feature-tile img { object-fit: contain; }
.feature-tile-title { font-size: 1rem; font-weight: 700; margin-bottom: .35rem; }

/* App download band */
.app-band {
  border-radius: 1.5rem;
  padding: 48px;
  background: linear-gradient(135deg, rgb(var(--be-primary)) 0%, var(--landing-accent) 100%);
  color: #fff;
  overflow: hidden;
}
.app-band-title { color: #fff; font-weight: 800; font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.app-band-text { color: rgba(255, 255, 255, .88); font-size: 1.1rem; margin-bottom: 1.5rem; }
.app-band-art { position: relative; font-size: 9rem; line-height: 1; color: rgba(255, 255, 255, .9); }
.app-band-art .bi-cloud-check { position: absolute; font-size: 4rem; right: 18%; top: 0; color: #fff; }
@media (max-width: 767.98px) { .app-band { padding: 32px 20px; } }
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem 1.1rem;
  border-radius: .75rem;
  background: #000;
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .25);
  line-height: 1.1;
  font-weight: 600;
}
.store-badge:hover { color: #fff; background: #1d1d1f; }
.store-badge i { font-size: 1.5rem; }
.store-badge small { display: block; font-size: .65rem; font-weight: 500; opacity: .8; }
.store-badge[hidden] { display: none; }

/* Simple page header (help, privacy) */
.page-hero { padding: 64px 0 40px; background: linear-gradient(180deg, rgb(var(--be-primary) / .08), transparent); }
.page-hero-title { font-weight: 800; font-size: clamp(2rem, 3.6vw, 2.75rem); letter-spacing: -.02em; }
.page-hero-subtitle { color: #667085; font-size: 1.1rem; }
.topic-chip { display: inline-block; padding: .4rem .9rem; border-radius: 999px; background: rgb(var(--be-primary) / .08); color: rgb(var(--be-primary)); font-weight: 600; font-size: .875rem; }
.legal-card { background: #fff; border: 1px solid var(--landing-border); border-radius: 1rem; padding: clamp(1.5rem, 4vw, 3rem); }
.help-contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem; border-radius: 1rem; background: var(--landing-muted); }

/* Accordions */
.faq-accordion .accordion-item { border: 1px solid var(--landing-border); border-radius: .875rem !important; margin-bottom: .75rem; overflow: hidden; }
.faq-accordion .accordion-button { font-weight: 600; color: var(--landing-ink); padding: 1.1rem 1.25rem; font-size: 1rem; }
.faq-accordion .accordion-button:not(.collapsed) { background: rgb(var(--be-primary) / .06); color: rgb(var(--be-primary)); box-shadow: none; }
.faq-accordion .accordion-button:focus { box-shadow: 0 0 0 .2rem rgb(var(--be-primary) / .2); }

/* ------------------------------------------------------------------ */
/* Pricing                                                             */
/* ------------------------------------------------------------------ */
.pricing-hero {
  padding: 64px 0 28px;
  background: radial-gradient(1200px 400px at 50% -10%, rgb(var(--be-primary) / .16), transparent 70%), linear-gradient(180deg, #f3f6ff, #fff);
}
.pricing-hero-title { font-weight: 800; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.03em; margin-bottom: .75rem; }
.pricing-hero-subtitle { color: #667085; font-size: 1.15rem; max-width: 640px; margin: 0 auto 2rem; }
.plan-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .25rem;
  padding: .3rem;
  background: #fff;
  border: 1px solid var(--landing-border);
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(16, 24, 40, .06);
  max-width: 100%;
}
.plan-tab {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .6rem 1.6rem;
  border-radius: 999px;
  font-weight: 700;
  color: #475467;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.plan-tab:hover { color: rgb(var(--be-primary)); }
.plan-tab.active { background: rgb(var(--be-primary)); color: #fff; }
.plan-tab:focus-visible { outline: 3px solid rgb(var(--be-primary) / .35); outline-offset: 2px; }
.plan-tab-badge { font-size: .65rem; text-transform: uppercase; letter-spacing: .05em; padding: .1rem .45rem; border-radius: 999px; background: rgba(255, 255, 255, .25); }
.plan-tab:not(.active) .plan-tab-badge { background: rgb(var(--be-primary) / .1); color: rgb(var(--be-primary)); }

.pricing-plans { padding: 24px 0 56px; }
.plan-pane-title { font-weight: 800; font-size: 1.5rem; }
.plan-pane-subtitle { color: #667085; font-size: 1.05rem; }
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 2px solid var(--landing-border);
  border-radius: 1.25rem;
  padding: 2rem 1.5rem 1.5rem;
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.price-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(16, 24, 40, .1); }
.price-card.is-best { border-color: rgb(var(--be-primary)); box-shadow: 0 16px 36px rgb(var(--be-primary) / .16); }
.price-card.is-current { border-color: #12b76a; }
.price-ribbon {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  padding: .3rem 1rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff8a00, #ff3d6e);
  color: #fff;
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}
.price-period { font-weight: 700; color: var(--landing-ink); font-size: 1.1rem; margin-bottom: .75rem; }
.price-amount { display: flex; align-items: baseline; justify-content: center; gap: .15rem; color: var(--landing-ink); }
.price-value { font-size: 2.75rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.price-unit { font-size: 1rem; font-weight: 600; color: #667085; }
.price-compare { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4rem .6rem; margin-top: .75rem; min-height: 1.75rem; font-size: .9rem; }
.price-regular { color: #98a2b3; }
.price-total { color: #475467; font-weight: 500; }
.price-save { background: #fff1e6; color: #e8590c; font-weight: 800; font-size: .75rem; padding: .2rem .55rem; border-radius: 999px; }
.price-renewal { margin: .75rem 0 0; color: #98a2b3; font-size: .8rem; }

.benefits { margin-top: 3rem; padding: 2rem; border-radius: 1.25rem; background: var(--landing-muted); }
.benefits-title { font-size: 1.25rem; font-weight: 800; text-align: center; margin-bottom: 1.5rem; }
.benefit { display: flex; align-items: center; gap: .75rem; height: 100%; padding: .9rem 1rem; background: #fff; border-radius: .875rem; border: 1px solid var(--landing-border); font-weight: 500; color: var(--landing-ink); }
.benefit-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: .6rem; background: rgb(var(--be-primary) / .1); color: rgb(var(--be-primary)); font-size: 1.1rem; }
.benefit-img { flex: none; object-fit: contain; }
.benefit > span { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 575.98px) {
    .benefits { margin-top: 2rem; padding: 1.25rem 1rem; }
    .compare-table th[scope="row"] { min-width: 140px; }
}

.free-card { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; border: 1px dashed #c9d1e0; border-radius: 1rem; background: #fff; }

.payment-strip { padding: 1.5rem 0; border-top: 1px solid var(--landing-border); border-bottom: 1px solid var(--landing-border); background: #fcfcfd; }

.compare-table-wrap { position: relative; background: #fff; border: 1px solid var(--landing-border); border-radius: 1rem; }
.compare-table { --bs-table-bg: transparent; text-align: center; }
.compare-table thead th { background: #fff; color: var(--landing-ink); font-weight: 800; padding: 1rem; border-bottom-width: 2px; }
.compare-table th[scope="row"] { color: #344054; padding-left: 1.25rem; min-width: 200px; }
.compare-table td, .compare-table th { padding: .85rem 1rem; border-color: var(--landing-border); }
.compare-table tbody tr:last-child > * { border-bottom: 0; }
.compare-table .bi-check-circle-fill { font-size: 1.15rem; }

/* ------------------------------------------------------------------ */
/* Footer                                                              */
/* ------------------------------------------------------------------ */
.site-footer { background: var(--landing-footer); color: #98a2b3; }
.site-footer img { max-height: 36px; width: auto; }
.footer-about { max-width: 340px; font-size: .95rem; }
.footer-heading { color: #fff; font-weight: 700; font-size: .95rem; margin-bottom: 1rem; }
.footer-links li { margin-bottom: .6rem; }
.footer-link { color: #98a2b3; text-decoration: none; font-weight: 500; transition: color .15s ease; }
.footer-link:hover { color: #fff; }
.footer-address { color: #98a2b3; font-size: .95rem; }
.social-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: #fff; text-decoration: none; transition: background-color .15s ease; }
.social-icon:hover { background: rgb(var(--be-primary)); color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); color: #98a2b3; }
.footer-bottom strong { color: #fff; }
.store-badge-dark { background: rgba(255, 255, 255, .06); }

/* Go to top */
#goTopBtn {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1020;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 999px;
  background: #fff;
  color: rgb(var(--be-primary));
  box-shadow: 0 6px 20px rgba(16, 24, 40, .18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
#goTopBtn.is-visible { opacity: 1; visibility: visible; transform: none; }

/* TeliHand Score page */
.score-preview { max-width: 460px; }
.score-preview-chart { height: 120px; background: linear-gradient(180deg, rgb(var(--be-primary) / .18), rgb(var(--be-primary) / .02)); clip-path: polygon(0 80%, 12% 70%, 25% 74%, 38% 52%, 52% 58%, 66% 35%, 80% 40%, 100% 15%, 100% 100%, 0 100%); }
.score-plan { position: relative; padding: 1.5rem; border-radius: 1.25rem; border: 1px solid var(--landing-border); background: #fff; transition: transform .2s ease, box-shadow .2s ease; }
.score-plan:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(16, 24, 40, .08); }
.score-plan.is-active { border-color: rgb(var(--be-primary) / .5); box-shadow: 0 10px 30px rgb(var(--be-primary) / .12); }
.score-plan-estimate { padding-top: .75rem; border-top: 1px dashed var(--landing-border); }
.score-calc-result { background: rgb(var(--be-primary) / .06); }
.score-level-0 { color: #b08d57; }
.score-level-1 { color: #8a9ba8; }
.score-level-2 { color: #d4a017; }
.score-level-3 { color: #6c7a89; }