/* ═══════════════════════════════════════════════════════════
   Pocketise — front.css  v3 (Modern Era)
   ══════════════════════════════════════════════════════════ */

/* ── Variables ───────────────────────────────────────────── */
:root {
  --f-primary:      #24a6e7;
  --f-primary-2:    #e06728;
  --f-accent:       #e06728;
  --f-dark:         #071520;
  --f-dark-2:       #0d3d5c;
  --f-text:         #1E293B;
  --f-muted:        #64748B;
  --f-border:       #E2E8F0;
  --f-surface:      #F8FAFF;
  --f-radius-card:  20px;
  --f-radius-btn:   12px;
  --f-shadow:       0 4px 24px rgba(39,170,225,.12);
  --f-shadow-lg:    0 20px 60px rgba(39,170,225,.16);
}

/* ── Base ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--f-text);
  background: #fff;
  overflow-x: hidden;
}
img { max-width: 100%; }
a { text-decoration: none; }

.py-section      { padding-top: 5rem;  padding-bottom: 5rem;  }
.py-section-lg   { padding-top: 7rem;  padding-bottom: 7rem;  }
@media (min-width: 992px) {
  .py-section    { padding-top: 6rem;  padding-bottom: 6rem;  }
  .py-section-lg { padding-top: 8rem;  padding-bottom: 8rem;  }
}

.gradient-text {
  color: var(--f-primary-2);
}

/* ── Section headings ─────────────────────────────────────── */
.f-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(39,170,225,.08);
  color: var(--f-primary);
  border-radius: 100px;
  padding: .3rem .875rem;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .03em;
  margin-bottom: 1rem;
}
.f-section-title {
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: 900;
  letter-spacing: -.5px;
  line-height: 1.12;
  color: var(--f-text);
}
.f-section-sub {
  font-size: 1.0625rem;
  color: var(--f-muted);
  line-height: 1.7;
  max-width: 560px;
  margin: .875rem auto 0;
}

/* ── Navbar ──────────────────────────────────────────────── */
.f-navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: transparent;
  transition: background .3s ease, box-shadow .3s ease, padding .3s ease;
  padding: 1.125rem 0;
}
.f-navbar.scrolled {
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 8px 32px rgba(0,0,0,.05);
  padding: .625rem 0;
}
.f-navbar .navbar-brand {
  display: inline-flex;
  align-items: center;
}
.f-navbar-logo {
  height: 44px;
  width: auto;
  object-fit: contain;
}
.f-navbar.scrolled .navbar-brand { color: var(--f-primary); }

.f-navbar .nav-link {
  font-weight: 500;
  font-size: .9375rem;
  color: rgba(255,255,255,.8);
  padding: .375rem .875rem;
  border-radius: 8px;
  transition: all .2s;
}
.f-navbar .nav-link:hover  { color: #fff; background: rgba(255,255,255,.12); }
.f-navbar .nav-link.active { color: #fff; font-weight: 600; }
.f-navbar.scrolled .nav-link { color: var(--f-text); }
.f-navbar.scrolled .nav-link:hover  { color: var(--f-primary); background: rgba(39,170,225,.07); }
.f-navbar.scrolled .nav-link.active { color: var(--f-primary); }

.f-navbar .navbar-toggler {
  border: none;
  padding: .375rem;
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.1);
  border-radius: 8px;
  transition: background .2s;
}
.f-navbar.scrolled .navbar-toggler { color: var(--f-text); background: var(--f-surface); }

.btn-nav-signin {
  border: 1.5px solid rgba(255,255,255,.3);
  color: rgba(255,255,255,.9) !important;
  border-radius: var(--f-radius-btn);
  padding: .425rem 1.1rem;
  font-weight: 600;
  font-size: .875rem;
  background: transparent;
  transition: all .2s;
}
.btn-nav-signin:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.55); }
.f-navbar.scrolled .btn-nav-signin {
  border-color: var(--f-border);
  color: var(--f-text) !important;
}
.f-navbar.scrolled .btn-nav-signin:hover { border-color: var(--f-primary); color: var(--f-primary) !important; background: rgba(39,170,225,.05); }

.btn-nav-cta {
  background: var(--f-primary);
  color: #fff !important;
  border-radius: var(--f-radius-btn);
  padding: .425rem 1.25rem;
  font-weight: 700;
  font-size: .875rem;
  border: none;
  box-shadow: 0 4px 14px rgba(36,166,231,.35);
  transition: all .2s;
}
.btn-nav-cta:hover { background: var(--f-accent); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(224,103,40,.45); color: #fff !important; }

@media (max-width: 991px) {
  .f-navbar { background: rgba(7,7,26,.96) !important; backdrop-filter: blur(14px); padding: .75rem 0; }
  .f-navbar .navbar-collapse { padding: 1rem 0; border-top: 1px solid rgba(255,255,255,.08); margin-top: .75rem; }
  .f-navbar .nav-link { color: rgba(255,255,255,.8); padding: .625rem .875rem; }
  .f-navbar .d-flex { flex-direction: row; flex-wrap: wrap; gap: .5rem; padding: .5rem 0; }
  .btn-nav-signin, .btn-nav-cta { padding: .5rem 1rem; }
}

/* ── Hero ────────────────────────────────────────────────── */
.f-hero {
  min-height: 100vh;
  background: #07071A;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 7rem 0 4rem;   /* 7rem top = clears the 72px fixed navbar */
}
.f-hero__grid {
  position: absolute;
  inset: 0;
  display: none;
}
.f-hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}
.f-hero__orb--1, .f-hero__orb--2, .f-hero__orb--3 { display: none; }
@keyframes orbDrift {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(28px,-18px) scale(1.06); }
}
.f-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 100px;
  padding: .375rem 1rem;
  font-size: .8125rem;
  font-weight: 600;
  color: rgba(255,255,255,.88);
  margin-bottom: 1.5rem;
  animation: fadeInDown .6s ease both;
}
.f-hero__eyebrow .live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 0 3px rgba(16,185,129,.25);
  animation: livePulse 2s ease infinite;
}
@keyframes livePulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(16,185,129,.25); }
  50%      { box-shadow: 0 0 0 6px rgba(16,185,129,.1); }
}
.f-hero h1 {
  font-size: clamp(2.25rem, 5vw, 4rem);
  font-weight: 900;
  line-height: 1.08;
  color: #fff;
  letter-spacing: -1.5px;
  animation: fadeInUp .65s .1s ease both;
}
.f-hero h1 .hl {
  -webkit-text-fill-color: #d8672e;
  color: #d8672e;
}
.f-hero__sub {
  font-size: 1.125rem;
  color: rgba(255,255,255,.6);
  line-height: 1.75;
  max-width: 520px;
  animation: fadeInUp .65s .2s ease both;
}
.f-hero__actions { animation: fadeInUp .65s .3s ease both; }
.btn-hero-main {
  background: var(--f-primary);
  color: #fff; border: none;
  border-radius: 14px;
  padding: .9rem 2.25rem;
  font-size: 1rem; font-weight: 700;
  box-shadow: 0 8px 30px rgba(36,166,231,.4);
  transition: all .25s;
}
.btn-hero-main:hover { background: var(--f-accent); transform: translateY(-2px); box-shadow: 0 14px 40px rgba(224,103,40,.5); color: #fff; }
.btn-hero-ghost {
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.88);
  border: 1.5px solid rgba(255,255,255,.22);
  border-radius: 14px;
  padding: .9rem 2.25rem;
  font-size: 1rem; font-weight: 600;
  backdrop-filter: blur(4px);
  transition: all .25s;
}
.btn-hero-ghost:hover { background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.4); }
.f-hero__trust {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: .8125rem;
  color: rgba(255,255,255,.45);
  animation: fadeInUp .65s .4s ease both;
}
.f-hero__trust .check-item {
  display: flex;
  align-items: center;
  gap: .375rem;
  color: rgba(255,255,255,.55);
}
.f-hero__trust .check-item i { color: #10B981; }

/* Pass mockup stack */
.f-pass-wrap {
  position: relative;
  animation: fadeInRight .8s .25s ease both;
  display: flex;
  justify-content: center;
}
.f-pass-card {
  position: absolute;
  width: 290px;
  border-radius: 24px;
  padding: 22px 24px;
  color: #fff;
}
.f-pass-card--1 {
  background: #27aae1;
  top: 0; right: 0; z-index: 3;
  box-shadow: 0 24px 64px rgba(39,170,225,.55);
  animation: floatA 4s ease-in-out infinite;
}
.f-pass-card--2 {
  background: #0EA5E9;
  top: 100px; right: 30px; z-index: 2;
  box-shadow: 0 16px 48px rgba(14,165,233,.4);
  animation: floatB 5.5s ease-in-out infinite;
  opacity: .88;
}
.f-pass-card--3 {
  background: #F59E0B;
  top: 195px; right: 60px; z-index: 1;
  box-shadow: 0 12px 36px rgba(245,158,11,.35);
  animation: floatC 7s ease-in-out infinite;
  opacity: .7;
}
@keyframes floatA { 0%,100%{ transform:translateY(0) rotate(-2deg); } 50%{ transform:translateY(-14px) rotate(-2deg); } }
@keyframes floatB { 0%,100%{ transform:translateY(0) rotate(1.5deg); } 50%{ transform:translateY(-9px) rotate(1.5deg); } }
@keyframes floatC { 0%,100%{ transform:translateY(0) rotate(4deg); } 50%{ transform:translateY(-6px) rotate(4deg); } }

.pass-lbl  { font-size: .6rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; opacity: .65; }
.pass-name { font-size: 1.125rem; font-weight: 800; margin: .2rem 0 .75rem; }
.pass-dots { display: flex; gap: 5px; }
.pass-dot  { width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); flex-shrink: 0; }
.pass-dot.on { background: rgba(255,255,255,.9); border-color: rgba(255,255,255,.9); }
.pass-row  { display: flex; justify-content: space-between; margin-top: .875rem; font-size: .75rem; opacity: .75; }

/* ── Stats bar ────────────────────────────────────────────── */
.f-stats {
  background: #fff;
  border-top: 1px solid var(--f-border);
  border-bottom: 1px solid var(--f-border);
}
.f-stat { text-align: center; padding: 2rem 1rem; }
.f-stat__num {
  font-size: 2.5rem;
  font-weight: 900;
  letter-spacing: -1.5px;
  color: var(--f-primary-2);
  line-height: 1;
}
.f-stat__lbl { font-size: .875rem; color: var(--f-muted); font-weight: 500; margin-top: .375rem; }

/* ── Trust logos ─────────────────────────────────────────── */
.f-trust {
  background: var(--f-surface);
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--f-border);
}
.f-trust__label {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--f-muted);
  margin-bottom: 1.125rem;
  text-align: center;
}
.f-trust__logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2rem; }
.f-trust__logo  { display: flex; align-items: center; gap: .5rem; font-weight: 600; color: #374151; font-size: .9375rem; opacity: .7; transition: opacity .2s; }
.f-trust__logo:hover { opacity: 1; }

/* ── Pass types ──────────────────────────────────────────── */
.f-types { background: #fff; }
.f-type-card {
  background: var(--f-surface);
  border: 1.5px solid var(--f-border);
  border-radius: 16px;
  padding: 1.375rem 1rem;
  text-align: center;
  transition: all .25s;
}
.f-type-card:hover {
  background: #fff;
  border-color: var(--f-primary);
  box-shadow: var(--f-shadow);
  transform: translateY(-4px);
}
.f-type-card__icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--f-primary-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem;
  color: #fff;
  margin-bottom: .875rem;
  box-shadow: 0 6px 16px rgba(216,103,46,.22);
  transition: transform .2s;
}
.f-type-card:hover .f-type-card__icon { transform: scale(1.08); }
.f-type-card__name { font-weight: 800; font-size: .875rem; color: var(--f-text); margin-bottom: .3rem; }
.f-type-card__desc { font-size: .7rem; color: var(--f-muted); line-height: 1.45; }

/* ── Features section ─────────────────────────────────────── */
.f-features { background: var(--f-surface); }
.f-features-alt { background: #fff; }

.f-check-list { list-style: none; padding: 0; margin: 0; }
.f-check-list li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .375rem 0;
  font-size: .9375rem;
  color: var(--f-text);
}
.f-check-list li .ico {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #10B981;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.f-check-list li .ico i { color: #fff; font-size: .65rem; }

/* Dashboard mockup */
.f-mockup {
  background: #fff;
  border: 1px solid var(--f-border);
  border-radius: 22px;
  padding: 1.75rem;
  box-shadow: var(--f-shadow-lg);
}
.f-mockup__bar { display: flex; align-items: center; gap: 6px; margin-bottom: 1.375rem; }
.f-mdot { width: 11px; height: 11px; border-radius: 50%; }
.f-mdot-r { background: #FF5F57; }
.f-mdot-y { background: #FFBD2E; }
.f-mdot-g { background: #28CA41; }
.f-mockup__url { margin-left: .5rem; font-size: .75rem; color: var(--f-muted); background: var(--f-surface); border-radius: 6px; padding: .2rem .6rem; }
.f-mockup__stat {
  background: var(--f-surface);
  border-radius: 14px;
  padding: 1rem;
  height: 100%;
}
.f-mockup__stat-num  { font-size: 1.5rem; font-weight: 900; color: var(--f-text); }
.f-mockup__stat-label{ font-size: .7rem; color: var(--f-muted); font-weight: 500; margin-top: .2rem; }
.f-mockup__activity { background: var(--f-surface); border-radius: 14px; padding: 1rem; }
.f-mockup__activity-title { font-size: .75rem; font-weight: 700; color: var(--f-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .75rem; }
.f-mockup__row { display: flex; align-items: center; gap: .625rem; padding: .4rem 0; border-bottom: 1px solid var(--f-border); font-size: .8125rem; color: var(--f-text); }
.f-mockup__row:last-child { border-bottom: none; }
.f-mockup__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--f-primary); flex-shrink: 0; }

/* ── How it works ─────────────────────────────────────────── */
.f-steps { background: #fff; }
.f-step { text-align: center; padding: 1rem; }
.f-step__num {
  width: 64px; height: 64px;
  border-radius: 18px;
  background: var(--f-primary-2);
  color: #fff;
  font-size: 1.625rem;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.375rem;
  box-shadow: 0 10px 28px rgba(216,103,46,.3);
}
.f-step__icon { font-size: 1.75rem; color: var(--f-primary); margin-bottom: .75rem; display: block; }
.f-step h5 { font-weight: 800; font-size: 1.0625rem; margin-bottom: .5rem; color: var(--f-text); }
.f-step p  { font-size: .875rem; color: var(--f-muted); line-height: 1.65; margin: 0; }

/* ── Testimonials ─────────────────────────────────────────── */
/* ── Use-Case Showcase Slider ────────────────────────────── */
.f-showcase { background: var(--f-surface); }

/* Outer wrapper: relative so arrows can be abs-positioned against it */
.f-showcase-wrap {
  position: relative;
  padding-bottom: 3.5rem;
}
.f-showcase-swiper {
  overflow: hidden !important;
}

.f-slide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
  background: #fff;
  border: 1.5px solid var(--f-border);
  border-radius: 24px;
  padding: 2.75rem 3rem;
  box-shadow: 0 8px 40px rgba(39,170,225,.07);
  box-sizing: border-box;
  overflow: visible;
}
.f-slide__badge {
  width: 56px; height: 56px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.5rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 6px 20px rgba(39,170,225,.25);
}
.f-slide__title {
  font-size: clamp(1.375rem, 2.5vw, 2rem);
  font-weight: 900;
  letter-spacing: -.5px;
  color: var(--f-text);
  margin-bottom: .75rem;
}
.f-slide__desc {
  color: var(--f-muted);
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: 1.5rem;
}
.f-slide__list {
  list-style: none;
  padding: 0; margin: 0 0 1.75rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.f-slide__list li {
  display: flex; align-items: flex-start; gap: .625rem;
  font-size: .9375rem; color: var(--f-text);
}
.f-slide__list li i { color: var(--f-primary); margin-top: 2px; flex-shrink: 0; }
.f-slide__cta {
  display: flex; align-items: center; gap: 1.25rem;
  margin-bottom: 1.75rem; flex-wrap: wrap;
}
.f-slide__link {
  font-size: .875rem; font-weight: 600;
  color: var(--f-primary);
  display: flex; align-items: center; gap: .25rem;
}
.f-slide__link:hover { color: var(--f-primary-2); }
.f-slide__kpi {
  display: flex; gap: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--f-border);
}
.f-slide__kpi > div { display: flex; flex-direction: column; gap: .125rem; }
.f-slide__kpi span { font-size: 1.625rem; font-weight: 900; color: var(--f-primary); letter-spacing: -.5px; }
.f-slide__kpi small { font-size: .75rem; color: var(--f-muted); line-height: 1.4; max-width: 120px; }

/* Pass phone visual */
.f-slide__visual {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: visible;
}
.f-slide__visual > div { transform-origin: top center; }
.f-slide__phone {
  width: 100%; max-width: 280px;
  display: flex; flex-direction: column; gap: .75rem;
}
.f-slide__card {
  border-radius: 20px;
  padding: 1.5rem;
  box-shadow: 0 20px 60px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.1) inset;
  color: #fff;
}
.f-slide__card-label {
  font-size: .6rem; font-weight: 700; letter-spacing: 2px;
  opacity: .65; text-transform: uppercase; margin-bottom: .25rem;
}
.f-slide__card-name { font-size: 1.25rem; font-weight: 800; }
.f-slide__card-row {
  display: flex; justify-content: space-between;
  font-size: .75rem; margin-top: .75rem;
}
.f-slide__card-lbl { display: block; font-size: .55rem; opacity: .6; text-transform: uppercase; letter-spacing: 1px; margin-bottom: .125rem; }
.f-slide__card-val { font-weight: 800; }
.f-sdot {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.45);
  background: transparent; display: inline-block;
}
.f-sdot.on { background: rgba(255,255,255,.9); border-color: rgba(255,255,255,.9); }
.f-slide__dots { display: flex; gap: 6px; flex-wrap: wrap; margin: .75rem 0; }
.f-slide__tag {
  display: inline-flex; align-items: center; gap: .375rem;
  background: #fff; border: 1.5px solid var(--f-border);
  border-radius: 8px; padding: .375rem .75rem;
  font-size: .75rem; font-weight: 600; color: var(--f-text);
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  width: fit-content;
}

/* Swiper custom nav — absolute children of .f-showcase-wrap */
.f-swiper-prev, .f-swiper-next {
  position: absolute;
  top: 50%;
  transform: translateY(calc(-50% - 1.75rem)); /* offset for pagination height */
  z-index: 20;
  width: 44px; height: 44px;
  background: #fff;
  border: 1.5px solid var(--f-border);
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  color: var(--f-text);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  transition: background .2s, border-color .2s, color .2s, box-shadow .2s;
  padding: 0;
  line-height: 1;
}
.f-swiper-prev { left: -58px; }
.f-swiper-next { right: -58px; }
.f-swiper-prev:hover, .f-swiper-next:hover {
  background: var(--f-accent);
  border-color: var(--f-accent);
  color: #fff;
  box-shadow: 0 6px 20px rgba(224,103,40,.35);
}
@media (max-width: 1200px) {
  .f-swiper-prev { left: -10px; }
  .f-swiper-next { right: -10px; }
  /* push slide content so arrows don't overlap */
  .f-slide { padding-left: 3rem; padding-right: 3rem; }
}
@media (max-width: 767px) {
  .f-swiper-prev { left: 0; }
  .f-swiper-next { right: 0; }
  .f-slide { padding-left: 3.5rem; padding-right: 3.5rem; }
}
.f-showcase-pagination {
  bottom: 0 !important;
  position: absolute;
  left: 50%; transform: translateX(-50%);
  width: auto !important;
}
.f-showcase-pagination .swiper-pagination-bullet {
  width: 8px; height: 8px;
  background: var(--f-border); opacity: 1;
  transition: all .25s;
  margin: 0 4px !important;
}
.f-showcase-pagination .swiper-pagination-bullet-active {
  background: var(--f-primary);
  width: 24px; border-radius: 4px;
}

/* Responsive showcase */
@media (max-width: 991px) {
  .f-slide {
    grid-template-columns: 1fr;
    gap: 2rem; padding: 2rem;
  }
  .f-slide__visual { order: -1; }
  .f-slide__phone { max-width: 260px; margin: 0 auto; }
}
@media (max-width: 575px) {
  .f-slide { padding: 1.5rem; border-radius: 18px; }
  .f-slide__kpi { gap: 1.25rem; }
  .f-slide__title { font-size: 1.25rem; }
}

/* ── Testimonials ────────────────────────────────────────── */
.f-testi { background: var(--f-surface); }
.f-testi-swiper { padding-bottom: 3rem !important; }
.f-testi-card {
  background: #fff;
  border: 1.5px solid var(--f-border);
  border-radius: 22px;
  padding: 2rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all .25s;
}
.f-testi-card:hover { transform: translateY(-5px); box-shadow: var(--f-shadow); border-color: rgba(39,170,225,.2); }
.f-testi-stars { color: #F59E0B; font-size: .875rem; letter-spacing: 2px; margin-bottom: 1rem; }
.f-testi-text  { font-size: .9375rem; color: var(--f-text); line-height: 1.75; font-style: italic; margin-bottom: 1.5rem; flex: 1; }
.f-testi-stat {
  margin-top: 1rem;
  padding-top: .875rem;
  border-top: 1px solid var(--f-border);
  font-size: .75rem;
  color: var(--f-primary);
  font-weight: 600;
}
.f-testi-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--f-primary-2);
  color: #fff;
  font-weight: 800;
  font-size: .875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.f-testi-name { font-weight: 700; font-size: .875rem; color: var(--f-text); }
.f-testi-role { font-size: .75rem; color: var(--f-muted); }
.f-testi-pagination .swiper-pagination-bullet {
  background: var(--f-border); opacity: 1;
  transition: all .25s;
}
.f-testi-pagination .swiper-pagination-bullet-active {
  background: var(--f-primary);
  width: 20px; border-radius: 4px;
}

/* ── Pricing ─────────────────────────────────────────────── */
.f-pricing { background: #fff; }
.f-plan-card {
  border: 1.5px solid var(--f-border);
  border-radius: 26px;
  padding: 2.25rem;
  height: 100%;
  position: relative;
  overflow: hidden;
  transition: all .3s;
  background: #fff;
}
.f-plan-card:hover { transform: translateY(-5px); box-shadow: var(--f-shadow-lg); }
.f-plan-card.featured {
  border-color: var(--f-primary);
  box-shadow: 0 0 0 4px rgba(39,170,225,.09);
}
.f-plan-card.featured::before {
  content: 'Most Popular';
  position: absolute;
  top: 0; right: 0;
  background: var(--f-primary-2);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  padding: .4rem 1.1rem;
  border-radius: 0 24px 0 14px;
}
.f-plan-name  { font-size: 1.125rem; font-weight: 800; color: var(--f-text); }
.f-plan-price { font-size: 3.25rem; font-weight: 900; letter-spacing: -2px; line-height: 1; color: var(--f-text); }
.f-plan-price sup { font-size: 1.375rem; vertical-align: top; margin-top: .6rem; display: inline-block; letter-spacing: 0; }
.f-plan-price .per { font-size: .875rem; font-weight: 500; color: var(--f-muted); letter-spacing: 0; }
.f-plan-yearly-save { font-size: .8125rem; color: #10B981; font-weight: 600; margin-top: .25rem; }
.f-plan-divider { height: 1px; background: var(--f-border); margin: 1.625rem 0; }
.f-plan-feat {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  font-size: .875rem;
  color: var(--f-text);
  padding: .25rem 0;
}
.f-plan-feat i { color: #10B981; font-size: .9375rem; flex-shrink: 0; margin-top: 1px; }
.btn-plan {
  width: 100%;
  padding: .8125rem;
  border-radius: 13px;
  font-weight: 700;
  font-size: .9375rem;
  border: none;
  color: #fff;
  background: var(--f-primary);
  box-shadow: 0 8px 22px rgba(36,166,231,.35);
  transition: all .2s;
}
.btn-plan:hover { background: var(--f-accent); box-shadow: 0 12px 30px rgba(224,103,40,.45); color: #fff; }
.btn-plan.filled:hover { background: var(--f-accent); transform: translateY(-1px); box-shadow: 0 12px 30px rgba(224,103,40,.45); color: #fff; }

/* Enterprise row */
.f-enterprise {
  background: var(--f-dark);
  border-radius: 22px;
  padding: 2rem 2.5rem;
  color: #fff;
  margin-top: 1.5rem;
}
.f-enterprise h5 { font-weight: 800; color: #fff; margin-bottom: .25rem; }
.f-enterprise p  { color: rgba(255,255,255,.6); font-size: .9rem; margin: 0; }
.btn-enterprise {
  background: rgba(255,255,255,.12);
  border: 1.5px solid rgba(255,255,255,.25);
  color: #fff;
  border-radius: 12px;
  padding: .625rem 1.75rem;
  font-weight: 700;
  font-size: .875rem;
  transition: all .2s;
  white-space: nowrap;
}
.btn-enterprise:hover { background: rgba(255,255,255,.22); color: #fff; border-color: rgba(255,255,255,.5); }

/* ── FAQ ─────────────────────────────────────────────────── */
.f-faq { background: var(--f-surface); }
.f-faq .accordion-item {
  background: #fff;
  border: 1px solid var(--f-border) !important;
  border-radius: 14px !important;
  margin-bottom: .625rem;
  overflow: hidden;
}
.f-faq .accordion-button {
  font-weight: 600;
  font-size: .9375rem;
  background: #fff;
  border-radius: 14px !important;
  box-shadow: none;
  color: var(--f-text);
}
.f-faq .accordion-button:not(.collapsed) {
  color: var(--f-primary);
  background: rgba(39,170,225,.04);
  box-shadow: none;
}
.f-faq .accordion-button:focus { box-shadow: none; }
.f-faq .accordion-button:not(.collapsed)::after {
  filter: invert(41%) sepia(91%) saturate(500%) hue-rotate(220deg);
}
.f-faq .accordion-body { font-size: .9rem; color: var(--f-muted); line-height: 1.75; }

/* ── Contact ─────────────────────────────────────────────── */
.f-contact { background: #fff; }
.f-contact-card {
  background: #fff;
  border: 1px solid var(--f-border);
  border-radius: 24px;
  padding: 2.5rem;
  box-shadow: var(--f-shadow);
}
.f-contact .form-label { font-weight: 600; font-size: .875rem; color: var(--f-text); margin-bottom: .375rem; }
.f-contact .form-control,
.f-contact .form-select {
  border: 1.5px solid var(--f-border);
  border-radius: 10px;
  padding: .75rem 1rem;
  font-size: .9375rem;
  background: var(--f-surface);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.f-contact .form-control:focus,
.f-contact .form-select:focus {
  border-color: var(--f-primary);
  box-shadow: 0 0 0 3px rgba(39,170,225,.12);
  background: #fff;
}
.f-contact-info-icon {
  width: 50px; height: 50px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.icon-indigo { background: rgba(39,170,225,.1);  color: var(--f-primary); }
.icon-green  { background: rgba(16,185,129,.1);  color: #10B981; }
.icon-amber  { background: rgba(245,158,11,.1);  color: #F59E0B; }
.f-contact-cta {
  background: var(--f-dark);
  border-radius: 18px;
  padding: 1.75rem;
  color: #fff;
}
.f-contact-cta h6 { color: #fff; font-weight: 800; }
.f-contact-cta p  { color: rgba(255,255,255,.6); font-size: .875rem; margin-bottom: 1rem; }

/* ── CTA section ─────────────────────────────────────────── */
.f-cta {
  background: #1E1B4B;
  position: relative;
  overflow: hidden;
}
.f-cta::before,
.f-cta::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}
.f-cta::before, .f-cta::after { display: none; }
.f-cta__content { position: relative; z-index: 1; }
.f-cta h2 { font-size: clamp(1.75rem, 3.5vw, 3rem); font-weight: 900; color: #fff; letter-spacing: -.5px; }
.f-cta p  { color: rgba(255,255,255,.6); font-size: 1.0625rem; max-width: 500px; margin: .875rem auto 0; }
.btn-cta-white {
  background: #fff;
  color: var(--f-primary);
  border-radius: 14px;
  padding: 1rem 2.75rem;
  font-size: 1.0625rem;
  font-weight: 800;
  border: none;
  box-shadow: 0 8px 32px rgba(0,0,0,.22);
  transition: all .25s;
  margin-top: 2rem;
  display: inline-block;
}
.btn-cta-white:hover { transform: translateY(-2px); box-shadow: 0 14px 44px rgba(0,0,0,.3); color: var(--f-accent); }
.f-cta-note { color: rgba(255,255,255,.38); font-size: .8125rem; margin-top: .875rem; }

/* ── Sub-page hero ───────────────────────────────────────── */
.f-subhero {
  background: #07071A;
  padding: 5.5rem 0 4rem;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.f-subhero::before {
  content: '';
  position: absolute;
  inset: 0;
  display: none;
}
.f-subhero > * { position: relative; }
.f-subhero h1 { font-weight: 900; font-size: clamp(2rem, 4vw, 3.25rem); letter-spacing: -1px; margin-bottom: .875rem; }
.f-subhero p  { color: rgba(255,255,255,.62); font-size: 1.0625rem; margin: 0; }

/* Features page rows */
.f-feat-row { padding: 5rem 0; }
.f-feat-row:nth-child(even) { background: var(--f-surface); }
.f-feat-icon-box {
  width: 68px; height: 68px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.875rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--f-shadow);
}
.f-feat-icon-box.indigo { background: #27aae1; color: #fff; }
.f-feat-icon-box.green  { background: #10B981; color: #fff; }
.f-feat-icon-box.amber  { background: #F59E0B; color: #fff; }
.f-feat-grid-card {
  background: #fff;
  border: 1px solid var(--f-border);
  border-radius: 18px;
  padding: 1.5rem;
  height: 100%;
  transition: all .25s;
}
.f-feat-grid-card:hover { border-color: var(--f-primary); box-shadow: var(--f-shadow); transform: translateY(-3px); }
.f-feat-grid-icon {
  width: 46px; height: 46px;
  border-radius: 11px;
  background: rgba(39,170,225,.08);
  color: var(--f-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  margin-bottom: .875rem;
  flex-shrink: 0;
}

/* Scanner phone mockup */
.f-phone-mock {
  background: #0F0F1A;
  border-radius: 24px;
  padding: 1.5rem;
  max-width: 260px;
  margin: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.f-phone-viewfinder {
  border: 2px dashed rgba(255,255,255,.2);
  border-radius: 14px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-bottom: 1rem;
  background: rgba(255,255,255,.03);
}
.f-phone-result {
  background: rgba(255,255,255,.06);
  border-radius: 12px;
  padding: .875rem 1rem;
}

/* ── Footer ──────────────────────────────────────────────── */
.f-footer { background: #07071A; }
.f-footer a { color: rgba(255,255,255,.5); font-size: .875rem; text-decoration: none; transition: color .2s; }
.f-footer a:hover { color: #fff; }
.f-footer__brand   { font-size: 1.5rem; font-weight: 900; color: #fff; letter-spacing: -.5px; margin-bottom: .75rem; display: block; }
.f-footer__logo    { height: 50px; width: auto; object-fit: contain; margin-bottom: .75rem; display: block; }
.f-footer__tagline { font-size: .875rem; color: rgba(255,255,255,.42); line-height: 1.65; }
.f-footer__heading { font-size: .75rem; font-weight: 700; color: rgba(255,255,255,.5); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1.25rem; }
.f-footer__list    { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .6rem; }
.f-footer__divider { border-color: rgba(255,255,255,.07); margin: 2.5rem 0 1.5rem; }
.f-footer__copy    { font-size: .8125rem; color: rgba(255,255,255,.28); margin: 0; }
.f-footer__badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 9px;
  padding: .45rem .875rem;
  font-size: .8rem;
  color: rgba(255,255,255,.6);
  transition: all .2s;
  text-decoration: none;
}
.f-footer__badge:hover { background: rgba(255,255,255,.1); color: rgba(255,255,255,.9) !important; border-color: rgba(255,255,255,.2); }

/* ── Scroll reveal ───────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .65s ease, transform .65s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }
.reveal-scale { opacity: 0; transform: scale(.95); transition: opacity .6s ease, transform .6s ease; }
.reveal-scale.visible { opacity: 1; transform: scale(1); }

/* ── Animations ──────────────────────────────────────────── */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 991px) {
  .f-pass-wrap { display: none; }
}
@media (max-width: 575px) {
  .f-hero h1 { font-size: 2.125rem; letter-spacing: -.5px; }
  .f-stat__num { font-size: 1.875rem; }
  .f-subhero { padding: 4rem 0 3rem; }
}