/* ==========================================================================
   Finsta — Zenvix-inspired revamp
   A single stylesheet that transforms every page: hero with cloud/landscape
   decoration, marquee logos, comparison panels, feature cards, stats,
   testimonials, FAQ, pricing, dark footer, floating chat.
   ========================================================================== */

/* ------- Root tokens ------- */
:root{
  /* Brand + surfaces */
  --ink:#0e1428;
  --ink-2:#1c2340;
  --muted:#5a6684;
  --muted-2:#8590aa;
  --line:#e6eaf3;
  --line-2:#eef1f8;
  --soft:#f5f7fc;
  --sky:#eef4ff;
  --white:#ffffff;

  /* Zenvix-style dark hero */
  --night-1:#0a0f24;
  --night-2:#141b3a;
  --night-3:#1e2650;

  /* Accents (nature-inspired palette) */
  --primary:#4a3aff;     /* electric indigo */
  --primary-2:#6a5dff;
  --primary-3:#8f83ff;
  --accent:#ff6b3d;      /* warm orange */
  --accent-2:#ffb040;    /* golden */
  --pink:#ff5f8a;
  --purple:#a259ff;
  --grass:#4fa96b;
  --grass-2:#7ec98a;
  --sky-blue:#4ec5ff;
  --success:#22b57e;
  --danger:#f45b5b;

  /* Radii + shadows */
  --r-lg:32px;
  --r-md:22px;
  --r-sm:14px;
  --r-pill:999px;
  --sh-lg:0 30px 80px rgba(14,20,40,.14);
  --sh-md:0 18px 46px rgba(14,20,40,.10);
  --sh-sm:0 8px 22px rgba(14,20,40,.08);
  --sh-glow:0 20px 60px rgba(74,58,255,.35);

  /* Layout */
  --max:1240px;
  --narrow:960px;

  /* Motion */
  --ease:cubic-bezier(.4,.14,.3,1);
}

/* ------- Base ------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:"Inter","DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
h1,h2,h3,h4,h5{font-family:"Bricolage Grotesque",sans-serif;letter-spacing:-.02em;line-height:1.14;margin:0 0 .5em;color:var(--ink);font-weight:700}
p{margin:0 0 1em}
:focus-visible{outline:3px solid rgba(74,58,255,.4);outline-offset:3px;border-radius:6px}

.skip-link{position:absolute;left:-9999px;top:10px;background:#fff;padding:10px 14px;z-index:9999;border-radius:8px}
.skip-link:focus{left:10px}

/* ------- Layout helpers ------- */
.container-wide{width:min(var(--max),calc(100% - 40px));margin-inline:auto;position:relative}
.container-narrow{width:min(var(--narrow),calc(100% - 40px));margin-inline:auto;position:relative}

/* ------- Header ------- */
.site-header{
  position:fixed;
  inset:0 0 auto;
  z-index:100;
  padding:14px 0;
  transition:padding .3s var(--ease), background .3s var(--ease);
}
.site-header .header-inner{
  height:66px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:0 22px;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid rgba(14,20,40,.06);
  border-radius:var(--r-pill);
  box-shadow:0 12px 40px rgba(14,20,40,.06);
}
.site-header.scrolled{padding:10px 0}
.site-header.scrolled .header-inner{box-shadow:0 16px 44px rgba(14,20,40,.09)}

.brand{display:inline-flex;align-items:center}
.brand img{width:150px;height:auto}

.main-nav{display:flex;align-items:center;gap:4px}
.nav-link{
  padding:10px 14px;
  font-size:14px;
  font-weight:600;
  color:var(--ink-2);
  border-radius:var(--r-pill);
  transition:.2s var(--ease);
  white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;
}
.nav-link:hover,.nav-link.active{background:var(--soft);color:var(--primary)}
.dropdown-trigger span{font-size:11px;opacity:.7}

.nav-dropdown{position:relative}
.dropdown-panel{
  position:absolute;
  top:calc(100% + 18px);
  left:0;
  min-width:280px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:var(--sh-lg);
  padding:10px;
  opacity:0;visibility:hidden;
  transform:translateY(10px);
  transition:.22s var(--ease);
}
.nav-dropdown.open .dropdown-panel,
.nav-dropdown:hover .dropdown-panel{opacity:1;visibility:visible;transform:none}
.dropdown-panel::before{content:"";position:absolute;height:18px;left:0;right:0;top:-18px}
.dropdown-panel a{
  display:flex;flex-direction:column;
  padding:12px 14px;border-radius:14px;
  transition:background .2s var(--ease);
}
.dropdown-panel a:hover{background:var(--soft)}
.dropdown-panel strong{font-size:14px;color:var(--ink)}
.dropdown-panel small{font-size:12px;color:var(--muted);line-height:1.4;margin-top:2px}
.mega-panel{width:640px;display:grid;grid-template-columns:1fr 1fr;gap:2px}
.mega-panel a{display:grid;grid-template-columns:46px 1fr;gap:12px;align-items:center}
.mega-panel b{
  display:grid;place-items:center;
  width:44px;height:44px;
  border-radius:14px;
  background:linear-gradient(135deg,#eef1ff,#faf5ff);
  color:var(--primary);font-size:11px;font-weight:800;
}
.mega-panel span{display:flex;flex-direction:column;min-width:0}

.nav-cta{margin-left:8px}
.nav-toggle{
  display:none;
  width:44px;height:44px;
  border:1px solid var(--line);
  background:#fff;border-radius:12px;
  align-items:center;justify-content:center;
}
.nav-toggle svg{width:22px;height:22px;stroke:var(--ink);stroke-width:2;fill:none;stroke-linecap:round}

/* ------- Buttons (Zenvix-style pills with icons) ------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:10px;
  border:1px solid transparent;
  border-radius:var(--r-pill);
  padding:13px 22px;
  font-weight:650;
  font-size:14.5px;
  line-height:1.2;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
  cursor:pointer;
  position:relative;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.btn-primary{background:var(--ink);color:#fff;box-shadow:0 12px 30px rgba(14,20,40,.28)}
.btn-primary:hover{background:var(--primary);box-shadow:var(--sh-glow)}
.btn-primary .btn-ico{background:var(--primary);color:#fff;border-radius:50%;width:26px;height:26px;display:grid;place-items:center;margin-left:-6px;margin-right:-6px}
.btn-primary:hover .btn-ico{background:#fff;color:var(--primary)}

.btn-ghost{border-color:rgba(255,255,255,.24);color:#fff;background:rgba(255,255,255,.06);backdrop-filter:blur(10px)}
.btn-ghost:hover{background:rgba(255,255,255,.14);color:#fff}

.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:var(--soft)}
.btn-light .btn-ico{background:var(--ink);color:#fff;border-radius:50%;width:26px;height:26px;display:grid;place-items:center;margin-left:-6px;margin-right:-6px}

.btn-outline-dark{border-color:var(--line);color:var(--ink);background:transparent}
.btn-outline-dark:hover{background:var(--soft)}

.btn-outline-light{border-color:rgba(255,255,255,.5);color:#fff;background:transparent}
.btn-outline-light:hover{background:rgba(255,255,255,.12);color:#fff}

.btn-sm{padding:10px 16px;font-size:13.5px}
.btn-lg{padding:16px 26px;font-size:16px}

/* ------- Section skeleton ------- */
.section{padding:120px 0;position:relative}
.section-soft{background:var(--soft)}
.section-dark{
  background:linear-gradient(155deg,var(--night-1),var(--night-2) 60%,var(--night-3));
  color:#f2f4fa;
  overflow:hidden;
}
.section-dark h1,.section-dark h2,.section-dark h3{color:#fff}
.section-dark p{color:#c4cbe0}

.section-head{max-width:760px;margin-bottom:60px}
.section-head-centered{margin-inline:auto;text-align:center}
.section-kicker{
  display:inline-block;
  padding:6px 14px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--primary);
  background:linear-gradient(135deg,rgba(74,58,255,.08),rgba(162,89,255,.08));
  border:1px solid rgba(74,58,255,.14);
  border-radius:var(--r-pill);
  margin-bottom:16px;
}
.section-kicker.light{
  color:#fff;
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.2);
}
.section-head h2{font-size:clamp(30px,3.6vw,50px);margin:0 0 16px}
.section-head p{font-size:17px;color:var(--muted);max-width:640px}
.section-head-centered p{margin-inline:auto}

/* ------- Reveal animation ------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.visible{opacity:1;transform:none}
.reveal.delay-1{transition-delay:.12s}
.reveal.delay-2{transition-delay:.24s}
.reveal.delay-3{transition-delay:.36s}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* ------- Reading progress ------- */
.reading-progress{
  position:fixed;top:0;left:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  transform-origin:0 50%;transform:scaleX(0);
  z-index:200;transition:transform .1s linear;
}

/* =========================================================================
   HERO — Zenvix-inspired dark hero with clouds, landscape, glowing headline
   ========================================================================= */
.hero{
  position:relative;
  padding:170px 0 200px;
  background:radial-gradient(ellipse at 20% 0%, #1e2a5c 0%, transparent 55%),
             radial-gradient(ellipse at 80% 10%, #2b1e5c 0%, transparent 50%),
             linear-gradient(165deg,#0a0f24 0%,#141b3a 55%,#1a1f45 100%);
  color:#fff;
  overflow:hidden;
  isolation:isolate;
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1px 1px at 28% 14%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1px 1px at 68% 12%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1px 1px at 88% 26%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1px 1px at 46% 8%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 20%, rgba(255,255,255,.9), transparent 60%);
  animation:twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle{0%{opacity:.55}100%{opacity:1}}

/* clouds */
.hero-cloud{
  position:absolute;
  pointer-events:none;
  opacity:.9;
  filter:drop-shadow(0 8px 22px rgba(255,255,255,.06));
}
.hero-cloud.c1{top:8%;left:-60px;width:340px;animation:floatCloud 22s linear infinite}
.hero-cloud.c2{top:22%;right:-80px;width:280px;opacity:.75;animation:floatCloud 30s linear infinite reverse}
.hero-cloud.c3{top:52%;left:8%;width:200px;opacity:.55;animation:floatCloud 26s linear infinite}
@keyframes floatCloud{
  0%{transform:translateX(0)}
  50%{transform:translateX(60px)}
  100%{transform:translateX(0)}
}

/* landscape bottom */
.hero-landscape{
  position:absolute;
  left:0;right:0;bottom:-2px;
  height:220px;
  z-index:1;
  pointer-events:none;
}
.hero-landscape img{width:100%;height:100%;object-fit:cover;object-position:top}
.hero::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:60px;
  background:#fff;
  clip-path:ellipse(80% 90% at 50% 100%);
  z-index:2;
}

/* sparkles */
.hero-spark{
  position:absolute;
  width:18px;height:18px;
  animation:sparkle 3s ease-in-out infinite;
}
.hero-spark.s1{top:16%;left:52%;animation-delay:0s}
.hero-spark.s2{top:38%;right:12%;width:14px;animation-delay:.7s}
.hero-spark.s3{top:26%;left:14%;width:12px;animation-delay:1.4s}
@keyframes sparkle{
  0%,100%{transform:scale(.6) rotate(0);opacity:.4}
  50%{transform:scale(1) rotate(180deg);opacity:1}
}

.hero-grid{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  align-items:center;
  gap:56px;
}

.hero-copy .eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 18px 8px 8px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-pill);
  font-size:13px;font-weight:600;color:#fff;
  backdrop-filter:blur(10px);
  margin-bottom:26px;
}
.hero-copy .eyebrow i{
  display:grid;place-items:center;
  width:26px;height:26px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--pink));
  color:#fff;font-size:13px;font-style:normal;font-weight:800;
}

.hero h1{
  font-size:clamp(48px,6vw,88px);
  line-height:1.02;
  letter-spacing:-.045em;
  color:#fff;
  margin:0 0 24px;
  max-width:820px;
}
.hero h1 .headline-accent{
  background:linear-gradient(120deg,#ffcbaa 0%,#ff7e5f 40%,#a259ff 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  display:inline-block;
}

.hero-lead{
  font-size:18px;
  color:#c4cbe0;
  max-width:600px;
  margin:0 0 34px;
}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:34px}

.hero-points{display:flex;gap:22px;flex-wrap:wrap;margin-top:32px}
.hero-points span{
  display:inline-flex;align-items:center;gap:10px;
  font-size:13px;color:#d1d7ea;
}
.hero-points span::before{
  content:"";width:26px;height:26px;border-radius:50%;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322b57e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l4 4L19 6'/></svg>");
  background-repeat:no-repeat;background-position:center;background-size:16px 16px;
}
.hero-points svg{display:none}

/* hero visual: floating dashboard mockup */
.hero-visual{position:relative}
.hero-image-stage{
  position:relative;
  margin:0;
  border-radius:26px;
  overflow:hidden;
  box-shadow:0 40px 100px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.08);
  animation:floatY 6s ease-in-out infinite;
  /* background:linear-gradient(135deg,#fff,#f2f5ff); */
}
.hero-image-stage img{width:100%;height:auto;display:block;border-radius:26px}
@keyframes floatY{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-14px)}
}
@media(prefers-reduced-motion:reduce){
  .hero-image-stage,.hero-cloud{animation:none}
}

/* floating stat pills around hero visual */
.hero-visual .float-pill{
  position:absolute;
  background:#fff;
  color:var(--ink);
  padding:10px 14px;
  border-radius:16px;
  box-shadow:var(--sh-md);
  display:flex;align-items:center;gap:10px;
  font-size:13px;font-weight:650;
  z-index:2;
}
.hero-visual .float-pill i{
  width:32px;height:32px;border-radius:10px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--primary),var(--purple));
  color:#fff;font-style:normal;
}
.hero-visual .float-pill.top{top:-16px;left:-18px;animation:floatY 5s ease-in-out infinite}
.hero-visual .float-pill.bot{bottom:-18px;right:-16px;animation:floatY 6s ease-in-out infinite reverse}
.hero-visual .float-pill small{display:block;font-size:11px;color:var(--muted);font-weight:500}

/* Hero variant for inner (product/service) pages */
.hero.hero-product{padding:150px 0 170px}
.hero-product h1{font-size:clamp(38px,5vw,66px)}

.breadcrumbs{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;color:#c4cbe0;margin-bottom:14px;
}
.breadcrumbs a{color:#fff;opacity:.85}
.breadcrumbs a:hover{opacity:1;text-decoration:underline}

/* =========================================================================
   CLIENT LOGO MARQUEE
   ========================================================================= */
.client-strip-section{padding:70px 0 40px;background:#fff;position:relative;z-index:5}
.client-strip-title{
  text-align:center;font-size:13px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin:0 0 26px;
}
.client-strip-section.client-strip-compact{padding:50px 0 20px}

.logo-marquee{
  position:relative;
  overflow:hidden;
  mask-image:linear-gradient(90deg,transparent 0,black 8%,black 92%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,black 8%,black 92%,transparent 100%);
}
.logo-track{
  display:flex;
  gap:36px;
  width:max-content;
  animation:marquee 48s linear infinite;
}
.logo-marquee:hover .logo-track{animation-play-state:paused}
@keyframes marquee{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
.client-logo-card{
  flex:0 0 auto;
  height:74px;
  min-width:160px;
  display:grid;place-items:center;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px 22px;
  transition:.25s var(--ease);
}
.client-logo-card:hover{border-color:var(--primary-3);box-shadow:var(--sh-sm)}
.client-logo-card img{
  max-height:44px;
  width:auto;
  filter:grayscale(1) contrast(.9);
  opacity:.75;
  transition:.25s var(--ease);
}
.client-logo-card:hover img{filter:none;opacity:1}

/* =========================================================================
   VALUE / "WHY" SECTION with feature cards
   ========================================================================= */
.value-section{background:#fff}
.value-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:26px;
  margin-top:20px;
}
.value-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:26px;
  padding:32px 28px;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
  position:relative;overflow:hidden;
}
.value-card:hover{transform:translateY(-6px);box-shadow:var(--sh-md);border-color:var(--primary-3)}
.value-card .ic{
  width:54px;height:54px;
  display:grid;place-items:center;
  border-radius:16px;
  background:linear-gradient(135deg,rgba(74,58,255,.12),rgba(162,89,255,.12));
  color:var(--primary);
  margin-bottom:20px;
}
.value-card .ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.value-card h3{font-size:20px;margin:0 0 10px}
.value-card p{color:var(--muted);font-size:14.5px;margin:0}

/* =========================================================================
   BEFORE / AFTER COMPARISON (Zenvix signature block)
   ========================================================================= */
.compare-section{background:var(--soft);position:relative;overflow:hidden}
.compare-section::before{
  content:"";position:absolute;top:0;left:0;right:0;height:340px;
  background:radial-gradient(ellipse at center top,rgba(74,58,255,.08),transparent 60%);
  pointer-events:none;
}
.compare-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:26px;
}
.compare-card{
  background:#fff;
  border-radius:var(--r-lg);
  padding:38px 34px;
  box-shadow:var(--sh-sm);
  border:1px solid var(--line);
  position:relative;
  overflow:hidden;
}
.compare-card.before{background:linear-gradient(180deg,#fff,#fff6f4)}
.compare-card.after{
  background:linear-gradient(180deg,#f5f2ff,#fff);
  border-color:rgba(74,58,255,.2);
  box-shadow:0 20px 60px rgba(74,58,255,.14);
}
.compare-tag{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;font-size:12px;font-weight:700;
  border-radius:var(--r-pill);
  text-transform:uppercase;letter-spacing:.1em;
  margin-bottom:16px;
}
.compare-card.before .compare-tag{background:#fee7e3;color:#c73a2a}
.compare-card.after .compare-tag{background:#e7e2ff;color:var(--primary)}
.compare-card h3{font-size:22px;margin:0 0 22px;font-weight:700}
.compare-list{list-style:none;margin:0 0 26px;padding:0}
.compare-list li{
  display:flex;align-items:flex-start;gap:12px;
  padding:12px 0;
  border-bottom:1px dashed var(--line);
  font-size:14.5px;color:var(--ink-2);
}
.compare-list li:last-child{border-bottom:0}
.compare-list li::before{
  content:"";flex-shrink:0;
  width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;
  margin-top:2px;
}
.compare-card.before .compare-list li::before{
  background:#fdd8d2;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c73a2a' stroke-width='3' stroke-linecap='round'><path d='M6 6l12 12M6 18L18 6'/></svg>");
  background-repeat:no-repeat;background-position:center;background-size:12px 12px;
}
.compare-card.after .compare-list li::before{
  background:#d7ceff;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a3aff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l4 4L19 6'/></svg>");
  background-repeat:no-repeat;background-position:center;background-size:13px 13px;
}
.compare-stats{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
  padding-top:22px;border-top:1px solid var(--line);
}
.compare-stats div strong{
  display:block;font-size:34px;font-weight:800;
  line-height:1;margin-bottom:4px;
  letter-spacing:-.02em;
}
.compare-card.before .compare-stats strong{color:#c73a2a}
.compare-card.after .compare-stats strong{
  background:linear-gradient(120deg,var(--primary),var(--purple));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.compare-stats div span{font-size:12px;color:var(--muted);font-weight:600}

/* =========================================================================
   FEATURE / MODULE grids (for pages that list modules)
   ========================================================================= */
.module-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}
.module-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:26px;
  padding:30px 26px;
  transition:.25s var(--ease);
  position:relative;overflow:hidden;
}
.module-card:hover{transform:translateY(-6px);box-shadow:var(--sh-md);border-color:var(--primary-3)}
.module-code{
  display:inline-block;
  padding:4px 12px;
  background:linear-gradient(135deg,rgba(74,58,255,.1),rgba(162,89,255,.1));
  color:var(--primary);
  font-size:11px;font-weight:800;letter-spacing:.1em;
  border-radius:var(--r-pill);
  margin-bottom:14px;
}
.module-card h3{font-size:20px;margin:0 0 10px}
.module-card p{color:var(--muted);font-size:14.5px;margin:0}

/* Loan visual cards */
.loan-visual-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}
.loan-visual-card{
  display:flex;flex-direction:column;
  background:#fff;
  border:1px solid var(--line);
  border-radius:26px;
  overflow:hidden;
  transition:.25s var(--ease);
}
.loan-visual-card:hover{transform:translateY(-6px);box-shadow:var(--sh-md);border-color:var(--primary-3)}
.loan-visual-media{aspect-ratio:16/10;overflow:hidden;background:linear-gradient(135deg,#eef1ff,#faf5ff)}
.loan-visual-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.loan-visual-card:hover .loan-visual-media img{transform:scale(1.05)}
.loan-visual-copy{padding:24px;flex:1;display:flex;flex-direction:column}
.loan-visual-copy>span{
  display:inline-block;
  font-size:11px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--primary);
  margin-bottom:8px;
}
.loan-visual-copy h3{font-size:20px;margin:0 0 10px}
.loan-visual-copy p{color:var(--muted);font-size:14px;margin:0 0 18px;flex:1}
.loan-visual-copy b{color:var(--primary);font-size:13px;font-weight:700}

/* =========================================================================
   HOW IT WORKS — three step blocks with vector illustration
   ========================================================================= */
.steps-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  margin-top:20px;
}
.step-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:26px;
  padding:32px 28px;
  text-align:center;
  transition:.25s var(--ease);
  position:relative;
}
.step-card:hover{transform:translateY(-6px);box-shadow:var(--sh-md);border-color:var(--primary-3)}
.step-num{
  display:inline-block;
  padding:5px 12px;
  font-size:11px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
  background:var(--soft);border-radius:var(--r-pill);
  margin-bottom:20px;
}
.step-card .step-visual{
  height:130px;
  display:grid;place-items:center;
  margin:0 auto 22px;
  background:linear-gradient(135deg,rgba(74,58,255,.06),rgba(162,89,255,.06));
  border-radius:20px;
}
.step-card .step-visual svg{width:100px;height:100px;fill:none;stroke:var(--primary);stroke-width:1.5}
.step-card h3{font-size:19px;margin:0 0 10px}
.step-card p{color:var(--muted);font-size:14.5px;margin:0}

.steps-top-stats{
  display:grid;grid-template-columns:repeat(2,1fr);gap:20px;
  max-width:640px;margin:0 auto 60px;
}
.steps-top-stats div{
  background:#fff;border:1px solid var(--line);
  border-radius:20px;padding:22px 24px;
}
.steps-top-stats strong{
  display:block;font-size:34px;font-weight:800;
  background:linear-gradient(120deg,var(--primary),var(--purple));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  line-height:1;margin-bottom:6px;letter-spacing:-.02em;
}
.steps-top-stats span{color:var(--muted);font-size:13.5px}

/* =========================================================================
   SPLIT PANEL (dark) — "Purpose built"
   ========================================================================= */
.section.section-dark .split-panel{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
  position:relative;z-index:2;
}
.section.section-dark::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 20% 30%,rgba(74,58,255,.25),transparent 45%),
    radial-gradient(circle at 80% 70%,rgba(255,107,61,.15),transparent 45%);
  pointer-events:none;
}
.feature-list ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.feature-list li{
  display:flex;align-items:flex-start;gap:14px;
  font-size:15px;color:#d5dcf0;
  padding:14px 18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
}
.feature-list li::before{
  content:"";flex-shrink:0;
  width:26px;height:26px;border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--purple));
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l4 4L19 6'/></svg>");
  background-repeat:no-repeat;background-position:center;background-size:14px 14px;
  margin-top:1px;
}
.feature-list li svg{display:none}

/* =========================================================================
   USE CASES grid (Zenvix people cards)
   ========================================================================= */
.usecase-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px;
}
.usecase-card{
  position:relative;
  border-radius:26px;
  overflow:hidden;
  aspect-ratio:3/4;
  background:#0f1738;
  transition:.3s var(--ease);
  isolation:isolate;
}
.usecase-card:hover{transform:translateY(-6px)}
.usecase-card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,23,56,0) 30%,rgba(15,23,56,.92) 100%);
  z-index:1;
}
.usecase-card>img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform .5s var(--ease)}
.usecase-card:hover>img{transform:scale(1.06)}
.usecase-body{
  position:absolute;bottom:0;left:0;right:0;
  padding:22px 22px 24px;color:#fff;
  z-index:2;
}
.usecase-body h3{font-size:19px;margin:0 0 6px;color:#fff}
.usecase-body p{font-size:13.5px;color:rgba(255,255,255,.82);margin:0 0 14px}
.usecase-stat{
  display:inline-block;
  padding:6px 12px;
  border-radius:var(--r-pill);
  font-size:12px;font-weight:700;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(10px);
}
.usecase-stat strong{color:var(--accent-2);font-weight:800}

/* =========================================================================
   INTEGRATIONS grid
   ========================================================================= */
.integrations-wrap{position:relative;padding:30px 0}
.integrations-grid{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:16px;
  margin-top:30px;
}
.integ-tile{
  aspect-ratio:1;
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  display:grid;place-items:center;
  padding:18px;
  transition:.25s var(--ease);
  font-weight:800;font-size:22px;
  color:var(--primary);
  font-family:"Bricolage Grotesque",sans-serif;
}
.integ-tile:hover{transform:translateY(-4px);border-color:var(--primary-3);box-shadow:var(--sh-sm)}
.integ-tile img,.integ-tile svg{width:48px;height:48px}

.integ-note{
  display:inline-flex;align-items:center;gap:14px;
  background:linear-gradient(135deg,var(--ink) 0%,var(--ink-2) 100%);
  color:#fff;
  border-radius:var(--r-pill);
  padding:14px 24px 14px 14px;
  margin-top:36px;
  font-weight:650;font-size:14.5px;
}
.integ-note .ic{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--purple));
  display:grid;place-items:center;
}
.integ-note .ic svg{width:18px;height:18px;stroke:#fff;stroke-width:2;fill:none}

/* =========================================================================
   STATS grid
   ========================================================================= */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:18px;
  margin-top:30px;
}
.stat-block{
  background:#fff;
  border:1px solid var(--line);
  border-radius:26px;
  padding:30px 24px;
  position:relative;overflow:hidden;
  transition:.25s var(--ease);
}
.stat-block:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--primary-3)}
.stat-block .stat-label{
  font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
  margin-bottom:14px;display:block;
}
.stat-block .stat-num{
  font-size:38px;font-weight:800;
  line-height:1;margin:14px 0 8px;
  letter-spacing:-.02em;
  background:linear-gradient(120deg,var(--primary),var(--purple));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat-block p{font-size:13.5px;color:var(--muted);margin:0}
.stat-block .ic{
  width:44px;height:44px;border-radius:14px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(74,58,255,.12),rgba(162,89,255,.12));
  color:var(--primary);
}
.stat-block .ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2}

/* =========================================================================
   TESTIMONIALS (with avatars)
   ========================================================================= */
.testimonials-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:26px;
  margin-top:20px;
}
.testimonial-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:26px;
  padding:32px 28px;
  position:relative;
  transition:.25s var(--ease);
}
.testimonial-card:hover{transform:translateY(-6px);box-shadow:var(--sh-md);border-color:var(--primary-3)}
.testimonial-card .stars{
  display:inline-flex;gap:3px;margin-bottom:14px;
  color:#ffb840;
}
.testimonial-card .stars svg{width:16px;height:16px;fill:currentColor}
.testimonial-card>p{
  font-size:16px;color:var(--ink-2);
  line-height:1.6;margin:0 0 24px;
}
.testimonial-card footer{
  display:flex;align-items:center;gap:14px;
  padding-top:20px;border-top:1px solid var(--line);
}
.testimonial-card .avatar{
  width:46px;height:46px;border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--purple));
  color:#fff;display:grid;place-items:center;
  font-weight:800;font-size:16px;flex-shrink:0;
}
.testimonial-card footer strong{display:block;font-size:14px;color:var(--ink)}
.testimonial-card footer span{display:block;font-size:12.5px;color:var(--muted)}
.testimonial-card .quote-mark{display:none}

/* Top testimonial header row */
.testi-toprow{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:18px;
  margin-bottom:44px;
}
.testi-badges{display:flex;gap:12px;flex-wrap:wrap}
.testi-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;
  background:#fff;border:1px solid var(--line);
  border-radius:var(--r-pill);
  font-size:13px;font-weight:600;color:var(--ink-2);
}
.testi-badge svg{width:16px;height:16px}
.testi-badge.star{color:#ffb840}

/* =========================================================================
   FAQ
   ========================================================================= */
.faq-list{display:grid;gap:14px;margin-top:20px}
.faq-item{
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  overflow:hidden;
  transition:.25s var(--ease);
}
.faq-item:hover{border-color:var(--primary-3)}
.faq-question{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 28px;
  font-size:16px;font-weight:650;
  color:var(--ink);
  text-align:left;
  transition:background .2s var(--ease);
}
.faq-question:hover{background:var(--soft)}
.faq-question i{
  flex-shrink:0;
  display:grid;place-items:center;
  width:34px;height:34px;
  border-radius:50%;
  background:var(--soft);
  color:var(--primary);
  font-style:normal;font-weight:600;font-size:22px;
  transition:.3s var(--ease);
  margin-left:20px;
}
.faq-question[aria-expanded="true"] i{
  background:var(--primary);
  color:#fff;
  transform:rotate(45deg);
}
.faq-answer{
  max-height:0;overflow:hidden;
  transition:max-height .35s var(--ease);
}
.faq-answer.open{max-height:520px}
.faq-answer p{
  padding:0 28px 24px;
  color:var(--muted);
  font-size:15px;line-height:1.7;margin:0;
}
.faq-answer p a{color:var(--primary);font-weight:600}

.faq-side-card{
  background:linear-gradient(135deg,var(--ink),var(--ink-2));
  color:#fff;border-radius:26px;
  padding:32px 28px;position:sticky;top:120px;
  text-align:center;
}
.faq-side-card .avatars{
  display:flex;justify-content:center;
  margin:0 auto 20px;
}
.faq-side-card .avatars span{
  width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--purple));
  border:3px solid var(--ink);
  color:#fff;font-weight:800;display:grid;place-items:center;
  font-size:14px;
  margin-left:-8px;
}
.faq-side-card .avatars span:first-child{margin-left:0}
.faq-side-card .avatars span.plus{background:linear-gradient(135deg,var(--accent),var(--pink));font-size:16px}
.faq-side-card h3{color:#fff;font-size:20px;margin:0 0 10px}
.faq-side-card p{color:rgba(255,255,255,.75);font-size:14px;margin:0 0 20px}

.faq-two-col{display:grid;grid-template-columns:1fr 320px;gap:40px}

/* =========================================================================
   PRICING (for pages that use it)
   ========================================================================= */
.pricing-toggle{
  display:inline-flex;
  padding:5px;
  background:var(--soft);
  border-radius:var(--r-pill);
  margin:0 auto 40px;
}
.pricing-toggle button{
  padding:10px 22px;
  font-size:14px;font-weight:600;
  border-radius:var(--r-pill);
  color:var(--muted);
  transition:.2s var(--ease);
  position:relative;
}
.pricing-toggle button.active{background:#fff;color:var(--ink);box-shadow:var(--sh-sm)}
.pricing-toggle .save{
  margin-left:8px;
  padding:2px 8px;font-size:11px;
  background:linear-gradient(135deg,var(--primary),var(--purple));
  color:#fff;border-radius:var(--r-pill);
}
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.pricing-card{
  background:#fff;border:1px solid var(--line);
  border-radius:28px;padding:32px 30px;
  display:flex;flex-direction:column;
}
.pricing-card.popular{
  background:linear-gradient(135deg,var(--ink),var(--ink-2));
  color:#fff;border-color:transparent;
  box-shadow:var(--sh-glow);
  position:relative;
}
.pricing-card.popular::before{
  content:"Popular";position:absolute;top:-14px;right:24px;
  padding:6px 14px;background:linear-gradient(135deg,var(--accent),var(--pink));
  color:#fff;font-size:11px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;
  border-radius:var(--r-pill);
}
.pricing-card h3{margin:0 0 6px;font-size:19px}
.pricing-card.popular h3{color:#fff}
.pricing-card>p{font-size:13.5px;color:var(--muted);margin:0 0 22px}
.pricing-card.popular>p{color:rgba(255,255,255,.7)}
.pricing-card .price{font-size:44px;font-weight:800;letter-spacing:-.02em;line-height:1}
.pricing-card .price small{font-size:14px;font-weight:500;color:var(--muted);margin-left:4px}
.pricing-card.popular .price small{color:rgba(255,255,255,.7)}
.pricing-card ul{list-style:none;margin:24px 0;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);flex:1}
.pricing-card.popular ul{border-color:rgba(255,255,255,.14)}
.pricing-card li{
  display:flex;align-items:flex-start;gap:10px;
  padding:8px 0;font-size:14px;
}
.pricing-card li::before{
  content:"";flex-shrink:0;width:20px;height:20px;border-radius:50%;
  background:rgba(74,58,255,.14);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a3aff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l4 4L19 6'/></svg>");
  background-repeat:no-repeat;background-position:center;background-size:12px 12px;
  margin-top:2px;
}
.pricing-card.popular li::before{background-color:rgba(255,255,255,.14);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l4 4L19 6'/></svg>")}

/* =========================================================================
   CTA SECTION
   ========================================================================= */
.cta-section{padding:80px 0;background:transparent}
.cta-card{
  position:relative;
  border-radius:var(--r-lg);
  padding:70px 60px;
  color:#fff;
  overflow:hidden;
  isolation:isolate;
  background:radial-gradient(circle at 20% 30%,#2b1e5c 0,transparent 55%),
             linear-gradient(135deg,var(--night-1) 0%,var(--ink-2) 100%);
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:40px;
  align-items:center;
}
.cta-card::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 85% 0%,rgba(74,58,255,.35),transparent 45%),
    radial-gradient(circle at 15% 100%,rgba(255,107,61,.22),transparent 40%);
  pointer-events:none;z-index:-1;
}
.cta-card::after{
  content:"";position:absolute;
  right:-40px;bottom:-40px;
  width:280px;height:280px;
  background:url("../img/decor/cloud.svg") no-repeat center/contain;
  opacity:.08;pointer-events:none;
}
.cta-card h2{font-size:clamp(28px,3.4vw,44px);color:#fff;margin:0 0 12px}
.cta-card .section-kicker{margin-bottom:14px}
.cta-card p{color:rgba(255,255,255,.75);margin:0}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer{
  background:linear-gradient(180deg,var(--night-1),#050818);
  color:#c4cbe0;padding:80px 0 40px;
  position:relative;overflow:hidden;
}
.site-footer::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 20% 30%,rgba(74,58,255,.15),transparent 40%),
    radial-gradient(circle at 80% 70%,rgba(255,107,61,.1),transparent 40%);
  pointer-events:none;
}
.footer-grid{
  position:relative;
  display:grid;
  grid-template-columns:1.6fr 1fr 1.2fr 1.2fr 1fr;
  gap:40px;
  padding-bottom:50px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.footer-brand img{width:150px;margin-bottom:20px;filter:brightness(0) invert(1)}
.footer-brand p{font-size:14px;color:rgba(255,255,255,.65);max-width:340px;margin-bottom:22px}
.footer-contact{display:flex;flex-direction:column;gap:8px}
.footer-contact a{
  color:#fff;font-size:14px;
  display:inline-flex;align-items:center;gap:8px;
  opacity:.85;transition:.2s var(--ease);
}
.footer-contact a:hover{color:var(--accent-2);opacity:1}

.site-footer h3{
  color:#fff;font-size:14px;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;
  margin:0 0 18px;
}
.site-footer a{
  display:block;padding:6px 0;
  font-size:14px;color:rgba(255,255,255,.7);
  transition:.2s var(--ease);
}
.site-footer a:hover{color:#fff;transform:translateX(4px)}
.footer-social{display:flex;gap:10px;margin-top:20px}
.footer-social a{
  width:40px;height:40px;padding:0;
  border:1px solid rgba(255,255,255,.14);
  border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.04);
  transition:.2s var(--ease);
}
.footer-social a:hover{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;transform:translateY(-2px);
}
.footer-social svg{width:18px;height:18px;fill:currentColor}

.footer-bottom{
  position:relative;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  padding-top:26px;font-size:13px;color:rgba(255,255,255,.5);
}

/* =========================================================================
   WHATSAPP / FLOATING CHAT
   ========================================================================= */
.whatsapp-float{
  position:fixed;
  right:22px;bottom:22px;
  width:58px;height:58px;
  border-radius:50%;
  background:linear-gradient(135deg,#25d366,#128c7e);
  color:#fff;
  display:grid;place-items:center;
  font-weight:800;font-size:14px;
  box-shadow:0 12px 30px rgba(37,211,102,.4);
  z-index:80;
  transition:transform .25s var(--ease);
  text-decoration:none;
}
.whatsapp-float::before{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  border:2px solid rgba(37,211,102,.35);
  animation:pulseRing 2.4s ease-out infinite;
}
@keyframes pulseRing{
  0%{transform:scale(.9);opacity:1}
  100%{transform:scale(1.5);opacity:0}
}
.whatsapp-float:hover{transform:scale(1.08)}
.whatsapp-float span{position:absolute;left:-9999px}

/* =========================================================================
   CONTACT PAGE
   ========================================================================= */
.contact-grid{
  display:grid;grid-template-columns:1.1fr .9fr;gap:50px;
  align-items:start;
}
.contact-form{
  background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:36px;
  box-shadow:var(--sh-md);
}
.contact-form label{
  display:block;font-size:13px;font-weight:600;
  color:var(--ink-2);margin-bottom:6px;
}
.contact-form input,
.contact-form select,
.contact-form textarea{
  width:100%;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:14px;
  font-size:15px;
  background:var(--soft);
  transition:.2s var(--ease);
  margin-bottom:16px;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  outline:none;
  border-color:var(--primary);
  background:#fff;
  box-shadow:0 0 0 3px rgba(74,58,255,.14);
}
.contact-form textarea{min-height:130px;resize:vertical}
.contact-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.contact-form button[type="submit"]{width:100%;margin-top:6px}
.form-status{
  padding:12px 16px;border-radius:12px;font-size:14px;
  margin-top:14px;
}
.form-status.success{background:#d7f5e6;color:#118a5a}
.form-status.error{background:#fee2e2;color:#c73a2a}
.form-status:empty{display:none}

.contact-side{display:grid;gap:20px}
.contact-info-card{
  background:#fff;border:1px solid var(--line);
  border-radius:24px;padding:26px 24px;
}
.contact-info-card h3{font-size:16px;margin:0 0 14px}
.contact-info-card .ic{
  width:44px;height:44px;border-radius:14px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(74,58,255,.12),rgba(162,89,255,.12));
  color:var(--primary);margin-bottom:14px;
}
.contact-info-card .ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2}
.contact-info-card a,.contact-info-card p{
  font-size:14.5px;color:var(--ink-2);margin:0;line-height:1.6;
}
.contact-info-card a{color:var(--primary);font-weight:600;display:block}
.contact-info-card a:hover{text-decoration:underline}

/* =========================================================================
   Legal / long-form pages
   ========================================================================= */
.source-section{padding:100px 0}
.source-copy p{color:var(--muted);font-size:16px;line-height:1.8}
.source-copy h2{font-size:28px;margin:32px 0 12px}
.source-copy h3{font-size:22px;margin:24px 0 10px}
.source-copy ul,.source-copy ol{padding-left:22px;color:var(--muted);line-height:1.8}
.source-copy a{color:var(--primary);font-weight:600}
.inline-link{color:var(--primary);font-weight:600}
.inline-link:hover{text-decoration:underline}

.answer-overview{padding:80px 0}
.answer-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:40px}
.answer-box{
  background:linear-gradient(135deg,var(--soft),#fff);
  border:1px solid var(--line);border-radius:26px;
  padding:32px;
}
.answer-box h3{font-size:22px;margin:0 0 10px}
.answer-box p{color:var(--muted);margin:0 0 12px}
.answer-box ul{margin:0;padding-left:20px;color:var(--muted)}

.content-checklist{list-style:none;padding:0;margin:20px 0;display:grid;gap:10px}
.content-checklist li{
  display:flex;align-items:flex-start;gap:12px;
  font-size:15px;color:var(--ink-2);
}
.content-checklist li::before{
  content:"";flex-shrink:0;width:24px;height:24px;border-radius:50%;
  background:rgba(74,58,255,.14);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a3aff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l4 4L19 6'/></svg>");
  background-repeat:no-repeat;background-position:center;background-size:14px 14px;margin-top:1px;
}

.page-toc{
  background:var(--soft);border-radius:24px;padding:22px 26px;
  margin:20px 0 40px;
}
.page-toc h4{margin:0 0 10px;font-size:14px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.page-toc ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.page-toc a{color:var(--ink-2);font-size:14.5px;padding:4px 0;display:inline-block}
.page-toc a:hover{color:var(--primary)}

/* Related grid */
.related-grid,.loan-example-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:20px;
}
.related-card,.related-card-media{
  background:#fff;border:1px solid var(--line);
  border-radius:22px;padding:22px 20px;
  transition:.2s var(--ease);
}
.related-card:hover,.related-card-media:hover{transform:translateY(-4px);box-shadow:var(--sh-sm);border-color:var(--primary-3)}
.related-card h4{margin:0 0 8px;font-size:17px}
.related-card p{margin:0 0 12px;color:var(--muted);font-size:14px}
.related-card a{color:var(--primary);font-weight:600;font-size:13.5px}
.related-thumb{border-radius:16px;overflow:hidden;margin-bottom:14px;aspect-ratio:16/10;background:var(--soft)}
.related-thumb img{width:100%;height:100%;object-fit:cover}

/* Process cards (used in some subpages) */
.process-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:20px;
}
.process-card{
  background:#fff;border:1px solid var(--line);
  border-radius:22px;padding:26px 24px;
  transition:.2s var(--ease);
}
.process-card:hover{border-color:var(--primary-3);box-shadow:var(--sh-sm);transform:translateY(-4px)}
.step-number{
  display:inline-grid;place-items:center;
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--purple));
  color:#fff;font-weight:800;font-size:14px;margin-bottom:14px;
}
.process-card h4{margin:0 0 8px;font-size:17px}
.process-card p{margin:0;color:var(--muted);font-size:14px}

/* SEO table */
.seo-table-wrap{overflow-x:auto;margin:20px 0;background:#fff;border-radius:22px;border:1px solid var(--line);padding:6px}
.seo-table{width:100%;border-collapse:collapse;min-width:600px}
.seo-table th,.seo-table td{padding:14px 18px;text-align:left;font-size:14.5px;border-bottom:1px solid var(--line)}
.seo-table th{background:var(--soft);font-weight:700;color:var(--ink);font-size:13px;text-transform:uppercase;letter-spacing:.06em}
.seo-table tr:last-child td{border-bottom:0}
.seo-table td strong{color:var(--primary)}

/* Split copy on section-dark */
.split-copy h2{color:#fff}
.split-copy p{color:#c4cbe0;font-size:17px;max-width:520px}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media(max-width:1200px){
  .integrations-grid{grid-template-columns:repeat(6,1fr)}
  .stats-grid{grid-template-columns:repeat(5,1fr);gap:14px}
  .stat-block{padding:22px 18px}
  .stat-block .stat-num{font-size:32px}
}
@media(max-width:1080px){
  .nav-toggle{display:grid}
  .main-nav{
    position:fixed;
    top:80px;left:20px;right:20px;
    background:#fff;
    border-radius:24px;
    padding:14px;
    box-shadow:var(--sh-lg);
    border:1px solid var(--line);
    flex-direction:column;
    align-items:stretch;
    max-height:calc(100vh - 100px);
    overflow-y:auto;
    display:none;
  }
  .main-nav.open{display:flex}
  .nav-link{padding:14px 18px;font-size:15px;justify-content:space-between}
  .nav-dropdown{width:100%}
  .dropdown-panel{
    position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;padding:0 8px 8px;min-width:0;width:auto;
    display:none;
  }
  .nav-dropdown.open .dropdown-panel{display:block}
  .mega-panel{grid-template-columns:1fr;width:auto}
  .nav-cta{margin-left:0;margin-top:8px;justify-content:center}

  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero h1{font-size:clamp(38px,7vw,64px)}
  .value-grid,.module-grid,.loan-visual-grid,.steps-grid,
  .testimonials-grid,.related-grid,.loan-example-grid,.process-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .compare-grid{grid-template-columns:1fr;gap:20px}
  .section.section-dark .split-panel{grid-template-columns:1fr;gap:36px}
  .usecase-grid{grid-template-columns:repeat(2,1fr)}
  .stats-grid{grid-template-columns:repeat(3,1fr)}
  .integrations-grid{grid-template-columns:repeat(5,1fr)}
  .cta-card{grid-template-columns:1fr;padding:50px 36px;text-align:center}
  .cta-actions{justify-content:center}
  .footer-grid{grid-template-columns:1fr 1fr;gap:34px}
  .footer-brand{grid-column:1/-1}
  .pricing-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr;gap:34px}
  .faq-two-col{grid-template-columns:1fr}
  .faq-side-card{position:static}
  .answer-grid{grid-template-columns:1fr}
}

/* =========================================================================
   404 PAGE + LEGAL PAGES (privacy, terms, all-pages) — no .hero block
   ========================================================================= */
.error-page{
  min-height:100vh;
  display:grid;place-items:center;text-align:center;
  padding:120px 24px 60px;
  background:radial-gradient(ellipse at 20% 0%,#1e2a5c 0%,transparent 55%),
             radial-gradient(ellipse at 80% 10%,#2b1e5c 0%,transparent 50%),
             linear-gradient(165deg,#0a0f24 0%,#141b3a 55%,#1a1f45 100%);
  color:#fff;
}
.error-page span{
  font-size:clamp(80px,15vw,180px);font-weight:800;line-height:1;
  background:linear-gradient(120deg,#ffcbaa 0%,#ff7e5f 40%,#a259ff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  display:block;letter-spacing:-.04em;
}
.error-page h1{color:#fff;font-size:clamp(28px,4vw,44px);margin:14px 0 12px}
.error-page p{color:#c4cbe0;max-width:520px;margin:0 auto 22px}
.error-page .btn{margin:6px}

/* Any page without a hero starts under the fixed header */
body[data-page="privacy"] main,
body[data-page="terms"] main,
body[data-page="all-pages"] main{padding-top:120px}
.site-page{padding-top:120px}

@media(max-width:720px){
  .section{padding:80px 0}
  .hero{padding:130px 0 160px}
  .hero-landscape{height:150px}
  .site-header{padding:10px 0}
  .site-header .header-inner{padding:0 16px;height:60px}
  .brand img{width:130px}
  .section-head{margin-bottom:36px}
  .value-grid,.module-grid,.loan-visual-grid,.steps-grid,
  .testimonials-grid,.related-grid,.loan-example-grid,.process-grid,
  .usecase-grid{
    grid-template-columns:1fr;
  }
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .integrations-grid{grid-template-columns:repeat(4,1fr)}
  .footer-grid{grid-template-columns:1fr}
  .contact-form .form-row{grid-template-columns:1fr}
  .cta-card{padding:38px 24px}
  .hero-visual .float-pill.top{top:-8px;left:0}
  .hero-visual .float-pill.bot{bottom:-8px;right:0}
  .hero-actions .btn{flex:1;justify-content:center;min-width:0}
  .compare-card{padding:28px 22px}
  .compare-stats{grid-template-columns:1fr;gap:12px}
  .whatsapp-float{width:52px;height:52px;right:16px;bottom:16px}
  .cta-actions{width:100%}
  .cta-actions .btn{flex:1}
}

/* ========================================================================== 
   2026 Pastel Green / Grey design refinement
   Mirrors the reference's airy nature-inspired visual language while keeping
   Finsta's original content and product architecture.
   ========================================================================== */
:root{
  --ink:#17352d;
  --ink-2:#294a42;
  --muted:#667771;
  --muted-2:#8a9994;
  --line:#dce6e1;
  --line-2:#edf3f0;
  --soft:#f2f5f3;
  --sky:#e9f3ef;
  --white:#fbfcfb;
  --night-1:#17352d;
  --night-2:#21473d;
  --night-3:#315b50;
  --primary:#4e7d6e;
  --primary-2:#6e9a8c;
  --primary-3:#a8c7bb;
  --accent:#dfeadf;
  --accent-2:#c8dbcf;
  --pink:#d8c9d4;
  --purple:#b8c3ba;
  --grass:#6f9e7f;
  --grass-2:#a8cbb3;
  --sky-blue:#b8d2cc;
  --success:#3f806b;
  --danger:#b46f6f;
  --r-lg:34px;
  --r-md:24px;
  --r-sm:16px;
  --sh-lg:0 28px 80px rgba(38,70,60,.14);
  --sh-md:0 18px 50px rgba(38,70,60,.11);
  --sh-sm:0 9px 28px rgba(38,70,60,.08);
  --sh-glow:0 20px 60px rgba(78,125,110,.22);
  --ease:cubic-bezier(.22,1,.36,1);
}
body{background:#f8faf8;color:var(--ink)}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(circle at 10% 8%,rgba(190,218,203,.22),transparent 28%),radial-gradient(circle at 88% 18%,rgba(211,220,216,.28),transparent 24%)}
h1,h2,h3,h4,h5{color:var(--ink);letter-spacing:-.035em}
.site-header{padding:18px 0}
.site-header .header-inner{height:70px;background:rgba(249,251,249,.88);border-color:rgba(73,112,99,.13);box-shadow:0 14px 44px rgba(48,79,69,.09)}
.nav-link:hover,.nav-link.active{background:#e8f0ec;color:var(--ink)}
.dropdown-panel{background:rgba(253,254,253,.98);border-color:#dbe6e0}
.mega-panel b{background:linear-gradient(145deg,#e5efe9,#f1f5f2);color:#416f60}
.btn{overflow:hidden;transition:transform .45s var(--ease),box-shadow .45s var(--ease),background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease)}
.btn::after{content:"";position:absolute;inset:-80% -35%;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.45),transparent 60%);transform:translateX(-75%) rotate(8deg);transition:transform .8s var(--ease)}
.btn:hover::after{transform:translateX(75%) rotate(8deg)}
.btn:hover{transform:translateY(-4px) scale(1.01)}
.btn-primary{background:#22483d;color:#fff;box-shadow:0 14px 32px rgba(34,72,61,.24)}
.btn-primary:hover{background:#4f7f6f;box-shadow:0 20px 42px rgba(65,111,96,.3)}
.btn-primary .btn-ico{background:#a9c9ba;color:#183c31}
.btn-ghost{border-color:rgba(31,70,59,.18);color:#254b40;background:rgba(255,255,255,.62)}
.btn-ghost:hover{background:#fff;color:#17352d;border-color:#aec9bd}
.section{padding:112px 0}
.section-soft{background:#eef2ef}
.section-dark{background:linear-gradient(155deg,#17382f,#244c41 58%,#355f53)}
.section-kicker{color:#3e6d5d;background:#e3ede7;border-color:#cbded3}
.section-head h2{font-size:clamp(34px,4vw,56px)}
.reveal{opacity:0;transform:translate3d(0,44px,0) scale(.985);filter:blur(6px);transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease)}
.reveal.visible{opacity:1;transform:none;filter:none}
.reveal.delay-1{transition-delay:.1s}.reveal.delay-2{transition-delay:.2s}.reveal.delay-3{transition-delay:.3s}
.reading-progress{background:linear-gradient(90deg,#7cae94,#b6d0c2)!important;height:3px!important}
.hero{min-height:900px;padding:170px 0 215px;background:linear-gradient(180deg,#edf4ef 0%,#e4eee8 62%,#d8e6dd 100%);color:var(--ink)}
.hero::before{background:radial-gradient(circle at 18% 24%,rgba(255,255,255,.95),transparent 26%),radial-gradient(circle at 82% 18%,rgba(190,214,201,.55),transparent 30%),linear-gradient(115deg,rgba(255,255,255,.45),transparent 45%);opacity:1}
.hero::after{background:linear-gradient(180deg,transparent 0%,rgba(255,255,255,.25) 60%,rgba(238,244,240,.9) 100%)}
.hero-cloud{opacity:.72;filter:saturate(.35) sepia(.08) hue-rotate(70deg) brightness(1.15)}
.hero-spark{filter:sepia(1) saturate(.4) hue-rotate(80deg) brightness(.75)}
.hero-grid{grid-template-columns:minmax(0,1fr) minmax(480px,.93fr);gap:72px}
.hero-copy .eyebrow{background:rgba(255,255,255,.72);color:#3d6d5d;border-color:rgba(81,125,110,.2);box-shadow:0 10px 28px rgba(58,91,80,.08)}
.hero-copy .eyebrow i{color:#5e8a7b}
.hero h1{color:#15362c;font-size:clamp(52px,6.2vw,86px);line-height:.99;max-width:780px}
.hero h1 .headline-accent{background:none;color:#5b8a78;-webkit-text-fill-color:currentColor;text-shadow:none}
.hero-lead{color:#586e66;font-size:18px;max-width:690px}
.hero-points span{color:#36584d}
.hero-points span::before{background:#6b9b88;box-shadow:0 0 0 5px rgba(107,155,136,.12)}
.hero-image-stage{background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(235,242,238,.82));border:1px solid rgba(72,112,99,.14);box-shadow:0 34px 90px rgba(43,74,64,.18);transform:rotate(1.2deg);transition:transform .9s var(--ease),box-shadow .9s var(--ease)}
.hero-image-stage:hover{transform:rotate(0deg) translateY(-8px);box-shadow:0 46px 110px rgba(43,74,64,.22)}
.hero-image-stage::before{background:linear-gradient(115deg,rgba(255,255,255,.7),transparent 45%)}
.hero-visual .float-pill{background:rgba(251,253,251,.92);border-color:rgba(70,110,96,.13);box-shadow:0 18px 46px rgba(42,75,64,.15)}
.hero-visual .float-pill i{background:#dcebe3;color:#386454}
.hero-landscape{opacity:.62;filter:saturate(.55) hue-rotate(32deg) brightness(1.1)}
.client-strip-section{background:#f8faf8;border-color:#e2ebe6}
.client-logo-card{background:#fff;border:1px solid #e4ebe7;box-shadow:0 8px 24px rgba(44,73,64,.05);transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease)}
.client-logo-card:hover{transform:translateY(-6px);border-color:#bdd2c7;box-shadow:0 18px 44px rgba(44,73,64,.1)}
.value-card,.product-card,.feature-card,.solution-card,.stat-card,.testimonial-card,.pricing-card,.faq-item,.process-card,.use-case-card,.info-card{background:rgba(253,254,253,.92);border-color:#dfe8e3;box-shadow:0 8px 30px rgba(45,76,66,.06);transition:transform .65s var(--ease),box-shadow .65s var(--ease),border-color .65s var(--ease),background .65s var(--ease)}
.value-card:hover,.product-card:hover,.feature-card:hover,.solution-card:hover,.stat-card:hover,.testimonial-card:hover,.pricing-card:hover,.process-card:hover,.use-case-card:hover,.info-card:hover{transform:translateY(-10px);border-color:#b7cec2;box-shadow:0 26px 62px rgba(45,76,66,.13);background:#fff}
.value-card .ic,.feature-card .ic,.stat-card .ic{background:linear-gradient(145deg,#dfece5,#f3f7f4);color:#416e5f}
.comparison-panel.before{background:#eef1ef;border-color:#d9e2dd}
.comparison-panel.after{background:linear-gradient(145deg,#dcebe3,#edf4f0);border-color:#c4d9ce}
.comparison-panel .metric{background:rgba(255,255,255,.72);border-color:rgba(84,123,109,.13)}
.feature-showcase,.platform-showcase{border-radius:42px;background:linear-gradient(145deg,#e5eee9,#f8faf8);border-color:#d7e3dd;box-shadow:0 28px 78px rgba(43,75,64,.12)}
.testimonial-card .stars{color:#6c9a87}
.faq-question:hover{background:#edf3ef}
.faq-question i{background:#dcebe3;color:#3d695a}
.pricing-card.featured{border-color:#8fb4a3;box-shadow:0 28px 74px rgba(55,94,80,.17)}
.pricing-toggle{background:#e6eee9;border-color:#d2dfd8}
.pricing-toggle button.active{background:#fff;color:#315d4e;box-shadow:0 7px 20px rgba(45,76,66,.12)}
.cta-band{background:linear-gradient(135deg,#d7e8df,#edf4f0)!important;color:#17372d!important;border-color:#c7dad0!important}
.cta-band h2,.cta-band h3{color:#17372d!important}.cta-band p{color:#5c7169!important}
.site-footer{background:#17372f!important}
.floating-chat{background:#4f806f!important;box-shadow:0 16px 38px rgba(52,94,79,.3)!important}
@keyframes floatCloud{0%{transform:translate3d(-2%,0,0)}50%{transform:translate3d(6%,10px,0)}100%{transform:translate3d(-2%,0,0)}}
@keyframes floatY{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-13px) rotate(1deg)}}
@keyframes marquee{to{transform:translateX(-50%)}}
@media(max-width:1080px){.hero-grid{grid-template-columns:1fr;gap:58px}.hero{min-height:auto;padding-top:145px}.hero h1{max-width:900px}.hero-visual{max-width:760px;margin-inline:auto}}
@media(max-width:700px){.section{padding:82px 0}.hero{padding:132px 0 150px}.hero h1{font-size:clamp(42px,14vw,62px)}.hero-image-stage{transform:none}.site-header .header-inner{height:62px}.container-wide,.container-narrow{width:min(100% - 24px,var(--max))}}
@media(prefers-reduced-motion:reduce){.btn::after{display:none}.hero-image-stage,.value-card,.product-card,.feature-card,.solution-card,.stat-card,.testimonial-card,.pricing-card,.process-card,.use-case-card,.info-card{transition:none}}

/* ========================================================================
   Refinement pass: lighter Zenvix-style surfaces + layered parallax
   ======================================================================== */
:root{
  --page-mint:#f5f8f5;
  --mint-1:#edf4ef;
  --mint-2:#e4eee8;
  --mint-3:#d7e6dd;
  --sage:#6f9988;
  --sage-dark:#23483c;
  --stone:#eef1ef;
  --stone-2:#e3e8e5;
}

/* Keep a clean, airy rhythm immediately below the floating header. */
.hero{
  min-height:820px;
  padding:142px 0 188px;
  background:
    radial-gradient(circle at 15% 14%,rgba(255,255,255,.95) 0 9%,transparent 30%),
    radial-gradient(circle at 86% 22%,rgba(200,220,210,.5),transparent 27%),
    linear-gradient(180deg,#f3f7f4 0%,#e8f0eb 54%,#dbe8e0 100%);
}
.hero-grid{align-items:center;gap:64px}
.hero-copy{padding-top:10px}
.hero-visual{margin-top:16px}
.hero-image-stage{
  border-radius:36px;
  padding:12px;
  background:rgba(250,252,250,.78);
  border-color:rgba(73,111,97,.16);
  box-shadow:0 24px 64px rgba(42,73,62,.13),0 2px 0 rgba(255,255,255,.85) inset;
}
.hero-image-stage img{
  border-radius:27px;
  filter:saturate(.78) hue-rotate(4deg) contrast(.96) brightness(1.035);
}
.hero-landscape{bottom:-3px;opacity:.5}
.client-strip-section{padding-top:32px}

/* Responsive parallax layers use the independent translate property so
   existing rotations, scale and hover transforms remain intact. */
.parallax-layer{
  --parallax-x:0px;
  --parallax-y:0px;
  translate:var(--parallax-x) var(--parallax-y);
  will-change:translate;
  transition:translate .12s linear;
}
.hero-cloud.parallax-layer{transition:translate .2s linear}
.hero-landscape.parallax-layer{transition:translate .08s linear}
.hero-image-stage.parallax-layer{transition:translate .1s linear,transform .9s var(--ease),box-shadow .9s var(--ease)}

/* Use light editorial bands instead of large dark blocks. */
.section-dark{
  background:
    radial-gradient(circle at 8% 12%,rgba(255,255,255,.7),transparent 28%),
    linear-gradient(145deg,#dce9e2,#edf4f0 58%,#e5ece8);
  color:var(--ink);
  border-block:1px solid #d3e0d9;
}
.section-dark h1,.section-dark h2,.section-dark h3,.section-dark h4{color:var(--ink)}
.section-dark p,.section-dark li{color:var(--muted)}
.section-kicker.light{color:#3d695a;background:rgba(255,255,255,.62);border-color:#c6d8cf}
.section-dark .btn-outline-light{color:var(--sage-dark);border-color:#aac4b7;background:rgba(255,255,255,.4)}
.section-dark .btn-outline-light:hover{background:#fff;color:var(--sage-dark)}

/* Lighten all formerly heavy featured cards. */
.pricing-card.popular,
.pricing-card.featured,
.faq-side-card,
.cta-card{
  color:var(--ink);
  background:
    radial-gradient(circle at 90% 5%,rgba(255,255,255,.75),transparent 28%),
    linear-gradient(145deg,#d8e8df,#edf4f0 62%,#f6f8f6);
  border:1px solid #bfd3c8;
  box-shadow:0 22px 58px rgba(48,83,70,.13);
}
.pricing-card.popular h3,.pricing-card.featured h3,
.faq-side-card h3,.cta-card h2,.cta-card h3{color:var(--ink)}
.pricing-card.popular>p,.pricing-card.featured>p,
.faq-side-card p,.cta-card p{color:#5a7068}
.pricing-card.popular .price,.pricing-card.featured .price{color:var(--sage-dark)}
.pricing-card.popular .price small,.pricing-card.featured .price small{color:var(--muted)}
.pricing-card.popular ul,.pricing-card.featured ul{border-color:rgba(69,107,93,.15)}
.pricing-card.popular li,.pricing-card.featured li{color:#425e55}
.pricing-card.popular li::before,.pricing-card.featured li::before{
  background-color:#d5e6dd;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f6d5d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l4 4L19 6'/></svg>");
}
.pricing-card.popular::before{background:#6f9988;color:#fff}
.faq-side-card .avatars span{background:linear-gradient(145deg,#86ad9c,#b9d1c5);color:#17382e}
.faq-side-card .avatars span.plus{background:#d9e5df;color:#315b4e}
.cta-card::before{background:radial-gradient(circle at 20% 40%,rgba(255,255,255,.72),transparent 28%),radial-gradient(circle at 85% 15%,rgba(147,182,165,.25),transparent 30%)}
.cta-card::after{opacity:.3;filter:saturate(.25) hue-rotate(55deg)}

/* Softer comparison and content cards. */
.compare-card.before{background:linear-gradient(145deg,#f1f3f2,#e8ecea);border-color:#d5ded9}
.compare-card.after{background:linear-gradient(145deg,#dcebe3,#eef4f1);border-color:#bfd5c9}
.compare-card,.value-card,.product-card,.feature-card,.solution-card,
.stat-card,.testimonial-card,.pricing-card,.faq-item,.process-card,
.use-case-card,.info-card,.related-card,.related-card-media,.contact-info-card{
  box-shadow:0 10px 30px rgba(45,76,66,.055);
}

/* Bring illustration palettes into the same soft green/grey family. */
.feature-showcase img,.platform-showcase img,.solution-media img,
.product-media img,.related-thumb img,.process-card img,.use-case-card img,
.section-dark img:not(.brand img):not(.client-logo-card img){
  filter:saturate(.76) sepia(.04) hue-rotate(8deg) contrast(.96) brightness(1.035);
  transition:filter .7s var(--ease),transform .8s var(--ease);
}
.feature-showcase:hover img,.platform-showcase:hover img,.solution-media:hover img,
.product-media:hover img,.related-thumb:hover img{
  filter:saturate(.9) sepia(.02) hue-rotate(4deg) contrast(.99) brightness(1.02);
  transform:scale(1.012);
}

/* Alternating section backgrounds create visual separation without darkness. */
main>.section:nth-of-type(4n+1):not(.section-dark){background:#fafcfb}
main>.section:nth-of-type(4n+2):not(.section-dark){background:#f1f5f2}
main>.section:nth-of-type(4n+3):not(.section-dark){background:#f7f9f7}
main>.section:nth-of-type(4n):not(.section-dark){background:#edf3ef}

@media(max-width:1080px){
  .hero{padding:132px 0 160px}
  .hero-visual{margin-top:0}
}
@media(max-width:700px){
  .hero{padding:112px 0 130px}
  .hero-copy{padding-top:0}
  .hero-grid{gap:38px}
  .hero-image-stage{padding:7px;border-radius:25px}
  .hero-image-stage img{border-radius:19px}
  .parallax-layer{translate:none!important}
}
@media(prefers-reduced-motion:reduce){.parallax-layer{translate:none!important;transition:none!important}}

/* =========================================================================
   HERO REFINEMENT — centered visual, centered content, cleaner parallax
   ========================================================================= */
.hero{
  min-height:auto;
  padding:132px 0 155px;
  color:var(--ink);
  background:
    radial-gradient(circle at 12% 22%,rgba(188,219,202,.62),transparent 23%),
    radial-gradient(circle at 88% 18%,rgba(219,227,223,.75),transparent 24%),
    linear-gradient(180deg,#f7faf8 0%,#edf4f0 62%,#e5eee9 100%);
}
.hero::before{
  opacity:.48;
  background:
    radial-gradient(circle at 20% 18%,rgba(255,255,255,.95) 0 3px,transparent 4px),
    radial-gradient(circle at 76% 25%,rgba(255,255,255,.88) 0 4px,transparent 5px),
    radial-gradient(circle at 58% 9%,rgba(126,164,146,.16) 0 80px,transparent 82px),
    radial-gradient(circle at 35% 38%,rgba(255,255,255,.55) 0 120px,transparent 122px);
  animation:none;
}
.hero::after{
  height:44px;
  background:#fff;
  clip-path:ellipse(74% 92% at 50% 100%);
}
.hero .container-wide{max-width:1180px}
.hero-grid{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:38px;
  text-align:center;
}
.hero-visual{
  order:1;
  width:min(900px,92vw);
  margin:0 auto;
  isolation:isolate;
}
.hero-copy{
  order:2;
  width:min(900px,100%);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.hero-copy .eyebrow{
  margin:0 0 18px;
  color:#25463b;
  background:rgba(255,255,255,.72);
  border-color:#c7d9d0;
  box-shadow:0 8px 24px rgba(57,92,78,.08);
}
.hero-copy .eyebrow i{
  background:linear-gradient(135deg,#6f9988,#a9c8b9);
  color:#fff;
}
.hero h1{
  max-width:940px;
  margin:0 auto 20px;
  font-size:clamp(44px,5.7vw,78px);
  line-height:1.03;
  color:#18352c;
  text-wrap:balance;
}
.hero h1 .headline-accent{
  color:#315f50;
  background:none;
  -webkit-text-fill-color:currentColor;
}
.hero-lead{
  max-width:760px;
  margin:0 auto 28px;
  color:#50675f;
  font-size:clamp(16px,1.7vw,19px);
  line-height:1.75;
  text-wrap:balance;
}
.hero-actions{justify-content:center;margin:0 0 26px}
.hero-points{justify-content:center;margin:0;gap:12px 24px}
.hero-points span{color:#415c53}
.hero-points span::before{background-color:#e3eee8;border-color:#bfd3c8}
.hero-image-stage{
  width:100%;
  margin:0 auto;
  padding:12px;
  border-radius:34px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(132,164,149,.28);
  box-shadow:0 30px 80px rgba(44,78,65,.16),0 5px 20px rgba(44,78,65,.07);
  backdrop-filter:blur(16px);
  animation:heroBreathe 7s ease-in-out infinite;
  overflow:hidden;
}
.hero-image-stage img{
  width:100%;
  max-height:520px;
  object-fit:contain;
  border-radius:24px;
  filter:saturate(.78) hue-rotate(7deg) brightness(1.045) contrast(.96);
}
@keyframes heroBreathe{
  0%,100%{transform:translateY(0) rotateX(0deg)}
  50%{transform:translateY(-9px) rotateX(.6deg)}
}
.hero-visual::before,
.hero-visual::after{
  content:"";
  position:absolute;
  z-index:-1;
  border-radius:50%;
  pointer-events:none;
  filter:blur(1px);
}
.hero-visual::before{
  width:220px;height:220px;left:-90px;top:10%;
  border:1px solid rgba(86,131,111,.22);
  box-shadow:inset 0 0 0 34px rgba(201,222,211,.19),inset 0 0 0 68px rgba(255,255,255,.16);
  animation:orbitalDrift 12s ease-in-out infinite;
}
.hero-visual::after{
  width:150px;height:150px;right:-55px;bottom:5%;
  background:radial-gradient(circle at 34% 32%,rgba(255,255,255,.9),rgba(183,211,197,.34) 55%,rgba(112,155,135,.12));
  animation:orbitalDrift 10s ease-in-out infinite reverse;
}
@keyframes orbitalDrift{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  50%{transform:translate3d(16px,-18px,0) rotate(12deg)}
}
.hero-cloud{opacity:.34;filter:saturate(.45) hue-rotate(35deg) brightness(1.15)}
.hero-cloud.c1{top:12%;left:-120px;width:300px}
.hero-cloud.c2{top:30%;right:-120px;width:250px}
.hero-cloud.c3{display:none}
.hero-spark{filter:hue-rotate(80deg) saturate(.35);opacity:.45}
.hero-landscape{height:120px;opacity:.72;filter:saturate(.46) hue-rotate(22deg) brightness(1.08)}
.hero-visual .float-pill{
  background:rgba(255,255,255,.88);
  border:1px solid #d4e1da;
  box-shadow:0 14px 34px rgba(42,75,62,.12);
}
.hero-visual .float-pill.top{top:26px;left:-28px}
.hero-visual .float-pill.bot{bottom:30px;right:-24px}
.hero-visual .float-pill i{background:linear-gradient(135deg,#6c9785,#a7c5b6)}
.breadcrumbs,.breadcrumbs a{color:#526b62}

/* Keep inner-page hero content centered and uncluttered too. */
.hero.hero-product{padding:126px 0 145px}
.hero-product h1{max-width:900px;font-size:clamp(40px,5vw,68px)}

@media(max-width:900px){
  .hero{padding:116px 0 130px}
  .hero-grid{gap:30px}
  .hero-visual{width:min(760px,94vw)}
  .hero-visual .float-pill{display:none}
  .hero-visual::before{left:-45px;width:145px;height:145px}
  .hero-visual::after{right:-25px;width:105px;height:105px}
}
@media(max-width:700px){
  .hero{padding:102px 0 112px}
  .hero h1{font-size:clamp(38px,11vw,54px)}
  .hero-image-stage{padding:7px;border-radius:23px}
  .hero-image-stage img{border-radius:17px;max-height:390px}
  .hero-points{gap:10px}
  .hero-points span{font-size:12px}
  .hero-cloud,.hero-spark{display:none}
  .hero-visual::before,.hero-visual::after{opacity:.55}
}
.hero-copy.parallax-layer{transition:translate .16s linear}
.hero-visual.parallax-layer{transition:translate .12s linear}

/* =========================================================================
   COMPACT 91% VIEW + SCROLL-RESPONSIVE HERO
   ========================================================================= */
:root{
  --site-visual-scale:.91;
  --hero-scroll-scale:1;
  --hero-scroll-rotate:0deg;
  --hero-scroll-lift:0px;
  --hero-copy-shift:0px;
  --hero-decor-opacity:1;
}

/* Overall visual scale increased by approximately 7% from the previous compact view. */
@supports (zoom: .91){
  body{zoom:var(--site-visual-scale)}
}

/* Fallback keeps the most visible proportions compact where zoom is absent. */
@supports not (zoom: .91){
  html{font-size:91%}
  .section{padding-block:102px}
  .container-wide{width:min(1054px,calc(100% - 34px))}
  .container-narrow{width:min(816px,calc(100% - 34px))}
}

/* Smaller, calmer hero visual. */
.hero{
  padding-top:122px;
  padding-bottom:138px;
}
.hero .container-wide{max-width:1080px}
.hero-grid{gap:30px}
.hero-visual{
  width:min(700px,78vw);
  perspective:1400px;
  transform-style:preserve-3d;
  will-change:translate,opacity;
}
.hero-image-stage{
  padding:9px;
  border-radius:28px;
  scale:var(--hero-scroll-scale);
  rotate:var(--hero-scroll-rotate);
  translate:0 var(--hero-scroll-lift);
  transform-origin:50% 35%;
  transition:
    scale .16s linear,
    rotate .16s linear,
    translate .16s linear,
    box-shadow .45s var(--ease),
    border-color .45s var(--ease);
  will-change:scale,rotate,translate;
  animation:none;
}
.hero-image-stage img{
  max-height:400px;
  border-radius:20px;
  transition:filter .45s var(--ease),transform .45s var(--ease);
}
.hero-image-stage:hover img{transform:scale(1.008)}
.hero-copy{
  translate:0 var(--hero-copy-shift);
  transition:translate .16s linear,opacity .3s ease;
}
.hero h1{font-size:clamp(39px,5vw,66px);max-width:820px}
.hero-lead{max-width:680px;font-size:clamp(15px,1.45vw,17px)}
.hero-actions{margin-bottom:22px}
.hero-visual::before,
.hero-visual::after,
.hero-cloud,
.hero-spark,
.hero-landscape{
  opacity:calc(var(--hero-decor-opacity) * .62);
  transition:opacity .25s linear,translate .16s linear;
}
.hero-visual::before{width:174px;height:174px;left:-64px}
.hero-visual::after{width:118px;height:118px;right:-38px}
.hero-visual .float-pill{scale:.88;transition:scale .2s ease,opacity .25s linear,translate .16s linear}

/* Compact the recurring interface proportions as well. */
.section{padding-block:102px}
.site-header .header-inner{height:60px;padding-inline:19px}
.brand img{width:136px}
.nav-link{padding:8px 12px;font-size:13px}
.btn{padding:11px 19px;font-size:13.5px}
.btn-lg{padding:14px 22px;font-size:15px}
.section-head{margin-bottom:48px}
.feature-card,.solution-card,.testimonial-card,.pricing-card,.faq-item{border-radius:calc(var(--r-md) * .88)}

@media(max-width:900px){
  @supports (zoom: .91){body{zoom:1}}
  .hero{padding:108px 0 120px}
  .hero-visual{width:min(650px,88vw)}
  .hero-image-stage img{max-height:360px}
  .section{padding-block:82px}
}
@media(max-width:700px){
  .hero{padding:96px 0 104px}
  .hero-grid{gap:24px}
  .hero-visual{width:min(560px,92vw)}
  .hero-image-stage img{max-height:310px}
  .hero h1{font-size:clamp(34px,10vw,47px)}
  .section{padding-block:68px}
}
@media(prefers-reduced-motion:reduce){
  .hero-image-stage,.hero-copy{scale:1!important;rotate:0deg!important;translate:0!important;transition:none!important}
}

/* =========================================================================
   HERO ORDER FIX — heading/content immediately below navigation, image after
   ========================================================================= */
.hero-grid{
  gap:28px;
}
.hero-copy{
  order:1;
  padding-top:4px;
}
.hero-visual{
  order:2;
  margin-top:6px;
}
.hero-copy .eyebrow{
  margin-bottom:14px;
}
.hero h1{
  margin-bottom:16px;
}
.hero-lead{
  margin-bottom:22px;
}
.hero-actions{
  margin-bottom:18px;
}
.hero{
  padding-top:96px;
}
@media(max-width:900px){
  .hero{padding-top:88px}
  .hero-grid{gap:24px}
}
@media(max-width:700px){
  .hero{padding-top:78px}
  .hero-grid{gap:20px}
  .hero-visual{margin-top:2px}
}

/* ========================================================================== 
   Inner-page elegance pass — compact rhythm, refined iconography, pastel depth
   ========================================================================== */
:root{
  --ink:#13231d;
  --ink-2:#263b33;
  --muted:#5c7068;
  --muted-2:#80918a;
  --primary:#2f745d;
  --primary-2:#4e9278;
  --primary-3:#9fcdb8;
  --accent:#d99164;
  --accent-2:#e8bc69;
  --pink:#d9a8b6;
  --purple:#a8a3cf;
  --grass:#70ad8d;
  --grass-2:#aed5bf;
  --sky-blue:#9bcbd3;
  --line:#dce8e1;
  --line-2:#edf3ef;
  --soft:#f2f7f4;
  --sky:#eef6f6;
  --sh-sm:0 8px 24px rgba(38,72,60,.07);
  --sh-md:0 18px 48px rgba(38,72,60,.09);
}

body{background:#fbfdfb;color:var(--ink)}
main{background:linear-gradient(180deg,#fbfdfb 0%,#f7faf8 46%,#fcfdfc 100%)}

/* Eliminate double vertical spacing on long-form inner pages. */
.section > .source-section{padding-block:0; padding:30px; border-radius:20px}
.section{padding-block:76px}
.answer-overview{padding-block:62px}
.section + .section{border-top:1px solid rgba(102,139,124,.07)}
.section-soft{
  background:
    radial-gradient(circle at 12% 14%,rgba(174,213,191,.22),transparent 28%),
    radial-gradient(circle at 88% 80%,rgba(155,203,211,.16),transparent 27%),
    linear-gradient(180deg,#f3f8f5,#f8fbf9);
}
.hero-product + .client-strip-section{margin-top:0}

/* Long-form reading width and stronger typography. */
.container-narrow.source-section{width:min(900px,calc(100% - 40px))}
.source-section .section-head{margin-bottom:26px}
.source-section .section-head h2{font-size:clamp(29px,3.25vw,43px);max-width:850px;color:#173228}
.source-copy{font-size:16px}
.source-copy p{color:#536a60;font-size:15.5px;line-height:1.76;margin-bottom:16px}
.source-copy > p:first-child{font-size:17px;line-height:1.72;color:#354f45}
.source-copy h2,.source-copy h3,.source-copy h4{color:#19372c}
.source-copy strong{color:#244d3e}
.source-copy a,.inline-link{color:#2c775d;text-decoration-color:rgba(44,119,93,.28);text-underline-offset:3px}
.source-copy a:hover,.inline-link:hover{color:#205d48;text-decoration-thickness:2px}

/* Calm, elegant checklist iconography: one small pastel marker, never duplicate SVGs. */
.content-checklist{gap:9px;margin:18px 0 22px}
.content-checklist li{
  position:relative;
  display:grid;
  grid-template-columns:26px minmax(0,1fr);
  align-items:start;
  gap:10px;
  min-height:42px;
  padding:10px 13px 10px 10px;
  border:1px solid rgba(92,137,118,.13);
  border-radius:14px;
  background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(239,247,242,.82));
  color:#354f45;
  line-height:1.55;
  box-shadow:0 5px 18px rgba(45,83,69,.035);
  transition:transform .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease);
}
.content-checklist li:hover{
  transform:translateX(4px);
  border-color:rgba(67,132,105,.27);
  background:linear-gradient(135deg,#fff,#edf7f1);
  box-shadow:0 10px 26px rgba(45,83,69,.07);
}
.content-checklist li svg{display:none!important}
.content-checklist li::before{
  content:"✓";
  width:24px;height:24px;
  display:grid;place-items:center;
  border-radius:9px;
  background:linear-gradient(145deg,#d9eee3,#edf7f1);
  border:1px solid #c1ddcf;
  color:#2f745d;
  font-size:13px;font-weight:900;line-height:1;
  margin:0;
  box-shadow:inset 0 1px rgba(255,255,255,.8);
}
.content-checklist li:nth-child(3n+2)::before{background:linear-gradient(145deg,#e8eef5,#f5f8fb);border-color:#d4dee8;color:#527385}
.content-checklist li:nth-child(3n)::before{background:linear-gradient(145deg,#f4e8df,#fbf5f0);border-color:#ead3c4;color:#a56742}

/* Overview and table of contents should feel like one composed editorial panel. */
.answer-grid{gap:24px;align-items:stretch}
.answer-box,.page-toc{
  border:1px solid rgba(83,126,108,.14);
  box-shadow:0 14px 38px rgba(40,77,63,.055);
}
.answer-box{
  background:
    radial-gradient(circle at 90% 12%,rgba(174,213,191,.35),transparent 30%),
    linear-gradient(145deg,#ffffff,#eff7f2);
  padding:28px 30px;
}
.answer-box h2,.answer-box h3{color:#17382b}
.answer-box p{color:#4e665c}
.page-toc{
  margin:0;
  padding:25px 26px;
  background:linear-gradient(155deg,#eef6f2,#f7faf8);
}
.page-toc > strong,.page-toc h4{display:block;color:#315b4b;margin-bottom:12px;font-size:12px;text-transform:uppercase;letter-spacing:.12em}
.page-toc ol,.page-toc ul{list-style:none;padding:0;margin:0;display:grid;gap:3px;counter-reset:toc}
.page-toc li{counter-increment:toc}
.page-toc li a{display:grid;grid-template-columns:22px 1fr;gap:8px;align-items:start;padding:6px 7px;border-radius:9px;color:#4d665b;font-size:13px;line-height:1.4}
.page-toc li a::before{content:counter(toc,decimal-leading-zero);color:#78a18f;font-size:10px;font-weight:800;padding-top:2px}
.page-toc li a:hover{background:rgba(255,255,255,.75);color:#245d47}

/* Brighter pastel cards with controlled accent variety. */
.related-grid,.loan-example-grid,.process-grid{gap:16px;margin-top:16px}
.related-card,.related-card-media,.process-card,.feature-card,.solution-card,.info-card,.use-case-card{
  border-color:rgba(72,119,99,.14);
  background:linear-gradient(145deg,#fff,#f3f8f5);
  box-shadow:0 10px 28px rgba(41,78,64,.055);
}
.related-card:nth-child(4n+2),.process-card:nth-child(4n+2),.feature-card:nth-child(4n+2){background:linear-gradient(145deg,#fff,#f1f6f8)}
.related-card:nth-child(4n+3),.process-card:nth-child(4n+3),.feature-card:nth-child(4n+3){background:linear-gradient(145deg,#fff,#faf4ef)}
.related-card:nth-child(4n),.process-card:nth-child(4n),.feature-card:nth-child(4n){background:linear-gradient(145deg,#fff,#f5f2f8)}
.related-card:hover,.related-card-media:hover,.process-card:hover,.feature-card:hover,.solution-card:hover,.info-card:hover,.use-case-card:hover{
  transform:translateY(-5px);
  border-color:rgba(47,116,93,.3);
  box-shadow:0 18px 42px rgba(41,78,64,.09);
}
.related-card span{color:#6e9484}
.related-card h3,.related-card h4,.process-card h3,.process-card h4{color:#1c3b2f}
.related-card p,.process-card p{color:#62766e}
.related-card b{color:#2f745d}
.related-card b svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.step-number{background:linear-gradient(145deg,#4c8d73,#8abca5);box-shadow:0 7px 18px rgba(54,116,90,.18)}

/* Tables: less clinical, more readable. */
.seo-table-wrap{padding:4px;border-color:#dce8e1;box-shadow:0 10px 28px rgba(42,76,64,.045)}
.seo-table th{background:#eaf4ef;color:#284c3e}
.seo-table tbody tr:nth-child(even){background:#f8fbf9}
.seo-table td{color:#53685f}

/* FAQ and CTA: bright, refined, never visually heavy. */
.faq-list{display:grid;gap:10px}
.faq-item{border-color:rgba(68,116,96,.14);background:rgba(255,255,255,.86);box-shadow:none}
.faq-item:hover{border-color:rgba(47,116,93,.26);box-shadow:0 12px 30px rgba(42,80,65,.055)}
.faq-question{color:#25483a}
.faq-question i{background:#e5f1eb;color:#36765d}
.faq-answer p{color:#60736b}
.cta-card{
  background:
    radial-gradient(circle at 12% 25%,rgba(255,255,255,.75),transparent 26%),
    radial-gradient(circle at 88% 16%,rgba(232,188,105,.24),transparent 24%),
    linear-gradient(135deg,#dcefe5 0%,#edf6f1 50%,#e9f2f3 100%);
  border:1px solid #c7dfd3;
  box-shadow:0 22px 56px rgba(49,91,73,.11);
}
.cta-card h2{color:#183a2d}
.cta-card p{color:#526c61}
.cta-card .section-kicker.light{background:rgba(255,255,255,.62);color:#357158;border-color:#c4ddcf}

/* Footer stays grounded but avoids near-black heaviness. */
.site-footer{background:linear-gradient(160deg,#17382f,#22493d);color:#dce9e3}
.site-footer h3,.site-footer h4{color:#f5faf7}
.site-footer p,.site-footer a{color:#c1d4cb}

@media(max-width:900px){
  .section{padding-block:62px}
  .answer-grid{gap:16px}
  .page-toc{margin-top:0}
}
@media(max-width:700px){
  .section{padding-block:52px}
  .answer-overview{padding-block:46px}
  .source-section .section-head{margin-bottom:20px}
  .source-copy > p:first-child{font-size:16px}
  .content-checklist li{grid-template-columns:24px 1fr;padding:9px 10px;font-size:14px}
  .answer-box,.page-toc{padding:22px 20px}
}


/* --- Final polish patch: navigation, finance motifs, compact arrows, footer CTA, back to top --- */


/* Fix oversized right-arrow / related-card icon disturbance across pages. */
.related-card b,
.loan-example-card b,
.related-card-media b{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:auto;
  font-size:14px;
  line-height:1;
  font-weight:700;
  color:#2d715a;
}
.related-card b svg,
.loan-example-card b svg,
.related-card-media b svg{
  display:none !important;
}
.related-card b::after,
.loan-example-card b::after,
.related-card-media b::after{
  content:"→";
  display:inline-block;
  font-size:14px;
  line-height:1;
  transform:translateY(-.5px);
}
.related-card,
.related-card-media,
.loan-example-card{overflow:hidden}

/* Desktop mega menu: float to the right, stay visible, feel more polished. */
.site-header,
.site-header .header-inner,
.main-nav,
.nav-dropdown{overflow:visible}
.site-header{z-index:120}
.dropdown-panel{
  z-index:140;
  border-color:rgba(96,133,118,.18);
  box-shadow:0 24px 60px rgba(28,57,47,.12);
}
@media(min-width:1081px){
  .main-nav{position:relative}
  .nav-dropdown .dropdown-panel{
    left:auto;
    right:0;
    top:calc(100% + 14px);
  }
  .nav-dropdown .mega-panel{
    width:min(680px,calc(100vw - 56px));
  }
  .nav-dropdown.loan-nav .loan-menu{
    min-width:340px;
    width:min(360px,calc(100vw - 56px));
  }
}

/* Softer, brighter finance-themed middle-section decoration. */
.section-soft,
.section-alt,
.source-section,
.faq-section,
.pricing-section,
.comparison-section{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.section-soft > *,
.section-alt > *,
.source-section > *,
.faq-section > *,
.pricing-section > *,
.comparison-section > *{position:relative;z-index:1}
.section-soft::before,
.section-alt::before,
.source-section::before{
  content:"₹";
  position:absolute;
  right:3.5%;
  top:12%;
  font-size:clamp(84px,9vw,132px);
  font-weight:800;
  line-height:1;
  color:rgba(95,159,130,.09);
  z-index:0;
  pointer-events:none;
}
.section-soft::after,
.section-alt::after,
.source-section::after,
.pricing-section::after,
.comparison-section::after{
  content:"";
  position:absolute;
  left:2%;
  bottom:10%;
  width:190px;
  height:190px;
  pointer-events:none;
  opacity:.28;
  z-index:0;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><g fill='none' stroke='%2390b6a4' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' opacity='.92'><circle cx='96' cy='96' r='62'/><path d='M54 112h15l12-18 16 24 17-36 11 18h20'/><path d='M73 72c8-12 18-17 31-17 17 0 28 9 35 25'/></g><text x='132' y='58' font-size='26' font-family='Arial' fill='%23b9d3c6'>₹</text></svg>");
}
.section-alt::before{left:4%;right:auto;top:auto;bottom:14%;color:rgba(127,181,159,.085)}
.section-alt::after{left:auto;right:2%;bottom:18%;opacity:.22;transform:scale(.92)}
@media(max-width:920px){
  .section-soft::before,.section-alt::before,.source-section::before{font-size:76px;opacity:.75}
  .section-soft::after,.section-alt::after,.source-section::after,.pricing-section::after,.comparison-section::after{width:120px;height:120px;opacity:.18}
}
@media(max-width:640px){
  .section-soft::before,.section-alt::before,.source-section::before,
  .section-soft::after,.section-alt::after,.source-section::after,.pricing-section::after,.comparison-section::after{display:none}
}

/* Dark call-sales button in CTA/footer area. */
.cta-actions .btn-outline-light[href^="tel"],
.site-footer .btn-outline-light[href^="tel"],
a.btn-outline-light[href^="tel"]{
  background:linear-gradient(135deg,#17382f,#214b3d);
  color:#f7fbf8;
  border-color:#17382f;
  box-shadow:0 14px 32px rgba(24,58,45,.18);
}
.cta-actions .btn-outline-light[href^="tel"]:hover,
.site-footer .btn-outline-light[href^="tel"]:hover,
a.btn-outline-light[href^="tel"]:hover{
  background:linear-gradient(135deg,#102b22,#17382f);
  color:#fff;
  border-color:#102b22;
}

/* Back-to-top button. */
.back-to-top{
  position:fixed;
  right:22px;
  bottom:22px;
  width:50px;
  height:50px;
  border:none;
  border-radius:18px;
  display:grid;
  place-items:center;
  font-size:20px;
  font-weight:800;
  background:linear-gradient(145deg,#17382f,#2b604d);
  color:#fff;
  box-shadow:0 18px 38px rgba(18,42,34,.22);
  cursor:pointer;
  z-index:160;
  opacity:0;
  visibility:hidden;
  transform:translateY(14px) scale(.92);
  transition:opacity .26s ease, transform .26s ease, visibility .26s ease, box-shadow .26s ease;
}
.back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.back-to-top:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 22px 42px rgba(18,42,34,.28)}
.back-to-top:focus-visible{outline:2px solid #95c8b2;outline-offset:3px}
@media(max-width:700px){.back-to-top{right:16px;bottom:16px;width:46px;height:46px;border-radius:16px}}

/* --- Final dark texture + background parallax refinement --- */
:root{--section-parallax:0px}

/* Background layers move independently during scroll. */
.section-soft,
.section-alt,
.section-dark,
.cta-section{
  --section-parallax:0px;
  background-position:center var(--section-parallax);
}
.section-soft::before,
.section-alt::before,
.source-section::before,
.section-soft::after,
.section-alt::after,
.source-section::after,
.pricing-section::after,
.comparison-section::after{
  transform:translate3d(0,var(--section-parallax),0);
  will-change:transform;
  transition:transform .08s linear;
}

/* Dark textured section 1: homepage feature/insight band. */
.section-dark{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  color:#edf7f2;
  background:
    radial-gradient(circle at 14% 18%,rgba(132,202,170,.17),transparent 30%),
    radial-gradient(circle at 88% 76%,rgba(111,159,201,.13),transparent 32%),
    linear-gradient(145deg,#102c24 0%,#173c31 52%,#102d26 100%);
}
.section-dark::before{
  content:"";
  position:absolute;
  inset:-80px;
  z-index:-2;
  pointer-events:none;
  opacity:.32;
  transform:translate3d(0,var(--section-parallax),0);
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),
    radial-gradient(circle at center,rgba(209,234,222,.09) 0 1px,transparent 1.5px);
  background-size:42px 42px,42px 42px,18px 18px;
}
.section-dark::after{
  content:"₹";
  position:absolute;
  right:5%;
  top:50%;
  z-index:-1;
  transform:translate3d(0,calc(-50% + var(--section-parallax)),0) rotate(-8deg);
  font-size:clamp(130px,17vw,250px);
  font-weight:900;
  line-height:1;
  color:rgba(211,238,225,.045);
  pointer-events:none;
}
.section-dark h2,.section-dark h3,.section-dark h4{color:#f5fbf7}
.section-dark p{color:#c8ddd3}
.section-dark .section-kicker{background:rgba(196,231,213,.12);border-color:rgba(196,231,213,.22);color:#cceada}

/* Dark textured section 2: conversion CTA bands on all pages. */
.cta-section{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  padding-block:54px;
  background:
    radial-gradient(circle at 10% 50%,rgba(149,211,180,.18),transparent 30%),
    radial-gradient(circle at 92% 20%,rgba(117,161,202,.13),transparent 28%),
    linear-gradient(135deg,#123127,#1b4538 58%,#13362d);
}
.cta-section::before{
  content:"";
  position:absolute;
  inset:-100px;
  z-index:-2;
  pointer-events:none;
  opacity:.28;
  transform:translate3d(0,var(--section-parallax),0);
  background-image:
    repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 1px,transparent 1px 13px),
    radial-gradient(circle,rgba(210,237,225,.1) 0 1px,transparent 1.5px);
  background-size:auto,20px 20px;
}
.cta-section::after{
  content:"₹";
  position:absolute;
  left:4%;
  bottom:-38px;
  z-index:-1;
  pointer-events:none;
  transform:translate3d(0,var(--section-parallax),0) rotate(10deg);
  font-size:clamp(110px,14vw,210px);
  font-weight:900;
  color:rgba(220,242,232,.05);
}
.cta-section .cta-card{
  background:rgba(246,251,248,.92);
  border:1px solid rgba(220,239,229,.54);
  box-shadow:0 26px 70px rgba(5,24,18,.24);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

/* Ensure no leftover card arrows are generated after removing SVGs. */
.related-card b::after,
.loan-example-card b::after,
.related-card-media b::after{content:none!important}

@media(max-width:700px){
  .section-dark::after,.cta-section::after{font-size:96px;opacity:.7}
  .cta-section{padding-block:38px}
}
@media(prefers-reduced-motion:reduce){
  .section-soft::before,.section-alt::before,.source-section::before,
  .section-soft::after,.section-alt::after,.source-section::after,
  .pricing-section::after,.comparison-section::after,
  .section-dark::before,.section-dark::after,.cta-section::before,.cta-section::after{transform:none!important;transition:none!important}
}


/* ===== Homepage polish: use case cards with icons + infographics ===== */
.usecase-card{background:#18203c}
.usecase-nbfc{background:linear-gradient(180deg,#4333a2 0%,#1d205d 100%)}
.usecase-coop{background:linear-gradient(180deg,#1b836a 0%,#12365a 100%)}
.usecase-mfi{background:linear-gradient(180deg,#b24c37 0%,#342246 100%)}
.usecase-nidhi{background:linear-gradient(180deg,#6e49ae 0%,#26245b 100%)}
.usecase-card::before{
  content:"";
  position:absolute;inset:auto -10% -12% auto;
  width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.16),rgba(255,255,255,0) 66%);
  z-index:0;pointer-events:none;
}
.usecase-card::after{background:linear-gradient(180deg,rgba(15,23,56,.02) 18%,rgba(15,23,56,.18) 58%,rgba(15,23,56,.76) 100%)}
.usecase-inner{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:space-between;height:100%;padding:22px}
.usecase-visual{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;min-height:110px}
.usecase-icon{width:68px;height:68px;border-radius:22px;display:grid;place-items:center;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(12px)}
.usecase-icon svg{width:34px;height:34px;stroke:#fff;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.usecase-mini{margin-left:auto;display:flex;align-items:flex-end;gap:7px;padding:14px 12px;border-radius:18px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);min-width:118px;justify-content:center}
.usecase-mini-bars span{width:14px;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.4))}
.usecase-mini-bars span:nth-child(1){height:28px}.usecase-mini-bars span:nth-child(2){height:42px}.usecase-mini-bars span:nth-child(3){height:20px}
.usecase-mini-flow{align-items:center;gap:10px;min-width:132px}
.usecase-mini-flow span{display:block;position:relative;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.9)}
.usecase-mini-flow span::after{content:"";position:absolute;right:-10px;top:10px;width:10px;height:2px;background:rgba(255,255,255,.65)}
.usecase-mini-flow span:last-child::after{display:none}
.usecase-mini-network{position:relative;min-width:124px;justify-content:space-around;align-items:center;padding:18px 14px}
.usecase-mini-network span{width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.16)}
.usecase-mini-network::before,.usecase-mini-network::after{content:"";position:absolute;left:26px;right:26px;height:2px;background:rgba(255,255,255,.58)}
.usecase-mini-network::before{top:30px;transform:rotate(18deg)}
.usecase-mini-network::after{top:30px;transform:rotate(-18deg)}
.usecase-mini-donut{min-width:104px;justify-content:center;align-items:center}
.usecase-mini-donut span{display:block;width:56px;height:56px;border-radius:50%;background:conic-gradient(#fff 0 72%,rgba(255,255,255,.18) 72% 100%);position:relative}
.usecase-mini-donut span::after{content:"";position:absolute;inset:12px;border-radius:50%;background:rgba(79,56,138,.9)}
.usecase-microstats{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.usecase-microstats span{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.01em;color:#fff;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.15)}
.usecase-body{position:static;padding:0;color:#fff;z-index:2;margin-top:auto}
.usecase-body h3{font-size:18px;margin:0 0 8px;color:#fff}
.usecase-body p{font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.86);margin:0 0 16px}
.usecase-stat{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.2);font-size:13px}
.usecase-stat strong{color:#ffd67f}

/* ===== Integration grid with icons, brand-accent colors, and mini infographics ===== */
.integrations-grid{gap:18px}
.integ-tile{
  --tile-accent:#2f7e63;
  aspect-ratio:auto;
  min-height:182px;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
  gap:12px;
  padding:18px 18px 16px;
  background:linear-gradient(180deg,#ffffff 0%,#f7fbf8 100%);
  box-shadow:0 10px 28px rgba(39,74,60,.04);
  position:relative;overflow:hidden;
}
.integ-tile::before{content:"";position:absolute;inset:auto -20px -22px auto;width:92px;height:92px;border-radius:28px;background:radial-gradient(circle,rgba(0,0,0,.03),rgba(0,0,0,0) 70%);opacity:.7}
.integ-tile strong{font-size:18px;line-height:1.1;color:var(--tile-accent);font-family:"DM Sans",sans-serif}
.integ-tile small{font-size:12.5px;line-height:1.45;color:#6a7b73;max-width:90px}
.integ-icon{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:color-mix(in srgb,var(--tile-accent) 12%, white);border:1px solid color-mix(in srgb,var(--tile-accent) 18%, white)}
.integ-icon svg{width:24px;height:24px;stroke:var(--tile-accent);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.integ-micro{margin-top:auto;display:flex;align-items:flex-end;gap:5px;width:100%}
.integ-micro span{display:block;flex:1;border-radius:999px;background:linear-gradient(180deg,color-mix(in srgb,var(--tile-accent) 95%, white),color-mix(in srgb,var(--tile-accent) 40%, white))}
.integ-micro span:nth-child(1){height:8px;opacity:.55}.integ-micro span:nth-child(2){height:14px;opacity:.82}.integ-micro span:nth-child(3){height:10px;opacity:.68}
.integ-tile:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--tile-accent) 45%, #d7e5dd);box-shadow:0 18px 42px rgba(39,74,60,.10)}
.integ-kyc{--tile-accent:#2c8f6d}.integ-pan{--tile-accent:#406b8a}.integ-cibil{--tile-accent:#0d7a56}.integ-crif{--tile-accent:#1d7f8d}.integ-upi{--tile-accent:#2856b6}.integ-nach{--tile-accent:#3b7c95}.integ-sms{--tile-accent:#e57a47}.integ-email{--tile-accent:#6a6fdf}.integ-gst{--tile-accent:#2a8d71}.integ-rbi{--tile-accent:#7a5830}.integ-mca{--tile-accent:#5f6da2}.integ-tally{--tile-accent:#13836f}
.integ-gpay{--tile-accent:#0f9d58}.integ-phonepe{--tile-accent:#5f259f}.integ-razorpay{--tile-accent:#0a7cff}.integ-digilocker{--tile-accent:#2e6db5}
.integration-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:20px}
.integration-stat{padding:16px 18px;border-radius:18px;background:linear-gradient(145deg,#fbfdfc,#eef6f1);border:1px solid rgba(63,110,92,.12);box-shadow:0 8px 24px rgba(39,74,60,.04);text-align:center}
.integration-stat strong{display:block;font-size:22px;line-height:1;color:#193d30;margin-bottom:6px}
.integration-stat span{font-size:13px;color:#667a71}
@media(max-width:920px){.integration-stats{grid-template-columns:1fr}.usecase-visual{min-height:88px}.integ-tile{min-height:164px}.integ-tile small{max-width:none}}
@media(max-width:640px){.usecase-card{aspect-ratio:auto;min-height:300px}.usecase-inner{padding:18px}.usecase-icon{width:60px;height:60px}.usecase-mini{min-width:96px}}

/* ========================================================================
   SKY BLUE + ORANGE THEME OVERRIDE
   Applied globally while preserving structure, motion and infographics.
   ======================================================================== */
:root{
  --ink:#102d46;
  --ink-2:#183b57;
  --muted:#5f7485;
  --muted-2:#8798a5;
  --line:#d9e9f2;
  --line-2:#eaf4f9;
  --soft:#eef8fd;
  --sky:#e5f6ff;
  --white:#ffffff;
  --night-1:#0c2f4a;
  --night-2:#124c70;
  --night-3:#1d6f98;
  --primary:#159bd3;
  --primary-2:#42b8e8;
  --primary-3:#8bd8f5;
  --accent:#f58220;
  --accent-2:#ffb34d;
  --pink:#ff8a78;
  --purple:#5b8fd9;
  --grass:#47b9d5;
  --grass-2:#90dded;
  --sky-blue:#3cbcf0;
  --success:#1fa5a7;
  --sh-glow:0 20px 60px rgba(21,155,211,.28);
}
body{
  background:#fbfdff;
  color:var(--ink);
}
:focus-visible{outline-color:rgba(245,130,32,.45)}

/* Header and menus */
.site-header .header-inner{
  background:rgba(255,255,255,.86);
  border-color:rgba(74,154,192,.13);
  box-shadow:0 14px 42px rgba(19,73,103,.08);
}
.nav-link:hover,.nav-link.active{background:#e8f6fc;color:#087fb5}
.dropdown-panel{
  background:rgba(253,254,255,.98)!important;
  border-color:#d7eaf3!important;
  box-shadow:0 24px 60px rgba(17,69,99,.13)!important;
}
.dropdown-panel a:hover{background:#edf8fd}
.mega-panel b{background:linear-gradient(145deg,#e1f5fd,#fff1e6)!important;color:#0b87bb!important}

/* Buttons */
.btn-primary,.nav-cta.btn-primary{
  background:linear-gradient(135deg,#0798d2,#42bce9)!important;
  border-color:#0798d2!important;
  color:#fff!important;
  box-shadow:0 14px 34px rgba(8,147,202,.22)!important;
}
.btn-primary:hover,.nav-cta.btn-primary:hover{background:linear-gradient(135deg,#087fab,#159bd3)!important}
.btn-primary .btn-ico,.btn-light .btn-ico{background:#f58220!important;color:#fff!important}
.btn-ghost{background:#fff!important;border-color:#cce4ef!important;color:#17445e!important}
.btn-ghost:hover{background:#eaf7fc!important;border-color:#8ed0ea!important}

/* Main hero */
.hero{
  background:
    radial-gradient(circle at 14% 14%,rgba(255,177,84,.22),transparent 25%),
    radial-gradient(circle at 86% 20%,rgba(78,197,255,.28),transparent 28%),
    linear-gradient(180deg,#e6f7ff 0%,#f4fbff 58%,#ffffff 100%)!important;
}
.hero::before{background:radial-gradient(circle,rgba(21,155,211,.12),transparent 68%)!important}
.hero h1,.hero-copy h1{color:#102d46!important}
.headline-accent{color:#098ac0!important;background:none!important;-webkit-text-fill-color:initial!important}
.eyebrow,.section-kicker{background:#e4f5fc!important;color:#087dae!important;border-color:#bee5f4!important}
.eyebrow i{background:#f58220!important;box-shadow:0 0 0 5px rgba(245,130,32,.14)!important}
.hero-lead{color:#5c7282!important}
.hero-points span{background:rgba(255,255,255,.82)!important;border-color:#d2eaf4!important;color:#2c5268!important}
.hero-points span::before{background-color:#fff3e8!important;border-color:#ffd2ad!important}
.hero-image-stage{background:linear-gradient(145deg,#ffffff,#eaf8fe)!important;border-color:#cde9f4!important;box-shadow:0 26px 66px rgba(20,105,145,.14)!important}

/* Global light sections and cards */
.section-soft,.section-alt,.source-section,.pricing-section,.comparison-section{
  background:
    radial-gradient(circle at 88% 16%,rgba(255,166,76,.09),transparent 24%),
    linear-gradient(180deg,#eef9fe 0%,#f8fcff 100%)!important;
}
.section-soft::before,.section-alt::before,.source-section::before{color:rgba(20,157,211,.08)!important}
.section-soft::after,.section-alt::after,.source-section::after,.pricing-section::after,.comparison-section::after{filter:hue-rotate(95deg) saturate(1.15)!important}
.section-head h2,.content-section h2,.answer-box h2,.answer-box h3{color:#12354f!important}
.section-head p,.content-section p,.answer-box p{color:#617785!important}

.feature-card,.solution-card,.info-card,.process-card,.related-card,.related-card-media,.use-case-card,.pricing-card,.stat-card,.value-card{
  background:linear-gradient(145deg,#ffffff,#f0f9fd)!important;
  border-color:rgba(49,151,196,.15)!important;
  box-shadow:0 12px 30px rgba(21,87,119,.055)!important;
}
.feature-card:nth-child(4n+2),.related-card:nth-child(4n+2),.process-card:nth-child(4n+2){background:linear-gradient(145deg,#fff,#fff6ee)!important}
.feature-card:nth-child(4n+3),.related-card:nth-child(4n+3),.process-card:nth-child(4n+3){background:linear-gradient(145deg,#fff,#edf7ff)!important}
.feature-card:nth-child(4n),.related-card:nth-child(4n),.process-card:nth-child(4n){background:linear-gradient(145deg,#fff,#f1f5ff)!important}
.feature-card:hover,.solution-card:hover,.info-card:hover,.process-card:hover,.related-card:hover,.related-card-media:hover,.use-case-card:hover{
  border-color:rgba(245,130,32,.35)!important;
  box-shadow:0 20px 44px rgba(18,92,127,.11)!important;
}
.feature-card h3,.solution-card h3,.related-card h3,.process-card h3{color:#143c56!important}
.feature-card p,.solution-card p,.related-card p,.process-card p{color:#647987!important}
.step-number{background:linear-gradient(145deg,#0b9ed5,#f58220)!important}

/* Answer, TOC, tables, FAQ */
.answer-box{
  background:radial-gradient(circle at 90% 12%,rgba(87,196,237,.24),transparent 31%),linear-gradient(145deg,#fff,#eef9fe)!important;
  border-color:#d3e9f3!important;
}
.page-toc{background:linear-gradient(155deg,#eaf7fd,#fff7ef)!important;border-color:#d5e9f2!important}
.page-toc > strong,.page-toc h4{color:#147da8!important}
.page-toc li a::before{color:#ef8a35!important}
.page-toc li a:hover{background:#fff;color:#087cae!important}
.seo-table th{background:#e4f5fc!important;color:#17445e!important}
.seo-table tbody tr:nth-child(even){background:#f8fcff!important}
.faq-item{border-color:#d4e9f2!important;background:rgba(255,255,255,.9)!important}
.faq-question{color:#153f58!important}
.faq-question i{background:#fff0e3!important;color:#e7761a!important}

/* CTA and dark textured sections */
.cta-section{
  background:
    linear-gradient(135deg,rgba(255,255,255,.03),rgba(255,255,255,0)),
    radial-gradient(circle at 12% 18%,rgba(245,130,32,.25),transparent 23%),
    radial-gradient(circle at 88% 80%,rgba(69,189,232,.24),transparent 28%),
    linear-gradient(135deg,#0e3d5c,#176b93)!important;
}
.cta-card{
  background:rgba(240,249,253,.94)!important;
  border-color:rgba(255,255,255,.6)!important;
  box-shadow:0 24px 62px rgba(5,45,68,.25)!important;
}
.cta-card h2{color:#12364f!important}
.cta-card p{color:#5b7180!important}
.cta-card .section-kicker.light{background:#fff1e5!important;color:#d96810!important;border-color:#ffd0aa!important}
.cta-actions .btn-outline-light[href^="tel"],.site-footer .btn-outline-light[href^="tel"],a.btn-outline-light[href^="tel"]{
  background:linear-gradient(135deg,#f58220,#ff9d45)!important;
  border-color:#f58220!important;
  color:#fff!important;
  box-shadow:0 14px 32px rgba(228,104,15,.22)!important;
}

/* Footer */
.site-footer{background:linear-gradient(155deg,#0b2d45,#10577a)!important;color:#dcecf4!important}
.site-footer p,.site-footer a{color:#c4dce8!important}
.site-footer a:hover{color:#ffb25d!important}

/* Integration cards */
.integ-tile{background:linear-gradient(180deg,#fff 0%,#eef9fe 100%)!important;border-color:#d2e8f2!important}
.integ-tile:nth-child(3n+2){background:linear-gradient(180deg,#fff 0%,#fff5ec 100%)!important}
.integ-tile:nth-child(3n){background:linear-gradient(180deg,#fff 0%,#edf6ff 100%)!important}
.integ-icon{background:#e8f7fd!important;border-color:#c7e7f4!important}
.integ-tile:nth-child(3n+2) .integ-icon{background:#fff0e3!important;border-color:#ffd5b5!important}
.integration-stat{background:linear-gradient(145deg,#fafdff,#eaf7fd)!important;border-color:#d2e8f2!important}
.integration-stat:nth-child(2){background:linear-gradient(145deg,#fff,#fff3e8)!important}
.integration-stat strong{color:#0f4665!important}

/* Use case cards: sky-blue family with orange highlight */
.usecase-nbfc{background:linear-gradient(180deg,#138fc3 0%,#123d67 100%)!important}
.usecase-coop{background:linear-gradient(180deg,#35b5de 0%,#175c82 100%)!important}
.usecase-mfi{background:linear-gradient(180deg,#f58220 0%,#b94724 58%,#5d2e3d 100%)!important}
.usecase-nidhi{background:linear-gradient(180deg,#4caed7 0%,#385da0 100%)!important}
.usecase-stat strong{color:#ffc36c!important}
.usecase-icon{background:rgba(255,255,255,.15)!important}
.usecase-microstats span{background:rgba(255,255,255,.12)!important}

/* Back-to-top */
.back-to-top{background:linear-gradient(145deg,#078fc5,#f58220)!important;box-shadow:0 18px 38px rgba(12,91,126,.25)!important}
.reading-progress{background:linear-gradient(90deg,#17a5d8,#f58220)!important}

/* Form fields */
input:focus,select:focus,textarea:focus{border-color:#42b8e8!important;box-shadow:0 0 0 4px rgba(66,184,232,.12)!important}

/* Decorative financial motifs */
.section-soft::before,.section-alt::before,.source-section::before{color:rgba(21,155,211,.085)!important}

@media(max-width:700px){
  .hero{background:linear-gradient(180deg,#e8f8ff,#fff)!important}
}


/* =========================================================================
   Sticky horizontal platform story — inspired by the supplied scroll reference
   ========================================================================= */
.platform-story{
  --story-progress:0;
  position:relative;
  height:430vh;
  background:
    radial-gradient(circle at 14% 18%,rgba(245,130,32,.14),transparent 24%),
    radial-gradient(circle at 86% 22%,rgba(38,174,229,.18),transparent 28%),
    linear-gradient(180deg,#f5fbff 0%,#eaf7fd 50%,#f8fcff 100%);
  overflow:clip;
}
.platform-story-sticky{
  position:sticky;
  top:0;
  height:100vh;
  min-height:820px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
  padding:86px 0 34px;
}
.platform-story-heading{text-align:center;position:relative;z-index:4;margin-bottom:28px}
.platform-story-heading h2{font-size:clamp(34px,4vw,62px);line-height:1.02;max-width:900px;margin:12px auto;color:#102d46}
.platform-story-heading p{max-width:690px;margin:0 auto;color:#607889;font-size:17px}
.platform-story-viewport{width:100%;overflow:hidden;position:relative}
.platform-story-track{
  display:flex;
  align-items:stretch;
  gap:18px;
  width:max-content;
  padding:4px max(5vw,48px) 22px;
  transform:translate3d(var(--story-x,0px),0,0);
  will-change:transform;
}
.story-card{
  width:min(31vw,430px);
  min-width:340px;
  height:410px;
  border-radius:30px;
  overflow:hidden;
  position:relative;
  flex:0 0 auto;
  box-shadow:0 24px 60px rgba(20,70,98,.12);
  transform:translateY(var(--story-y,0px)) scale(var(--story-scale,.94));
  opacity:var(--story-opacity,.78);
  transition:box-shadow .3s ease;
  will-change:transform,opacity;
}
.story-card.is-active{box-shadow:0 30px 76px rgba(20,70,98,.2)}
.story-image-card{background:#dff3fc;border:1px solid rgba(25,143,190,.14)}
.story-image-card img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.story-image-card.is-active img{transform:scale(1.045)}
.story-image-card::after{content:"";position:absolute;inset:42% 0 0;background:linear-gradient(180deg,transparent,rgba(5,42,65,.78))}
.story-image-label{position:absolute;left:24px;right:24px;bottom:22px;z-index:2;color:#fff;display:flex;flex-direction:column;gap:4px}
.story-image-label span{font-size:12px;text-transform:uppercase;letter-spacing:.13em;color:#ffd29c;font-weight:800}
.story-image-label strong{font-size:21px;line-height:1.15}
.story-info-card{padding:28px;color:#fff;display:flex;flex-direction:column;isolation:isolate}
.story-info-card::before{content:"";position:absolute;inset:0;background:linear-gradient(140deg,rgba(255,255,255,.14),transparent 44%);z-index:-1}
.story-info-card::after{content:"₹";position:absolute;right:18px;bottom:-22px;font-size:150px;line-height:1;font-weight:900;color:rgba(255,255,255,.07);z-index:-1}
.story-blue{background:linear-gradient(160deg,#149bd0,#164d79)}
.story-orange{background:linear-gradient(160deg,#f58b2a,#b74828 72%,#633144)}
.story-sky{background:linear-gradient(160deg,#4bbfe7,#2b70a7)}
.story-navy{background:linear-gradient(160deg,#163e63,#10263f)}
.story-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}
.story-index{font-size:13px;font-weight:900;color:rgba(255,255,255,.66)}
.story-tag{padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.07em}
.story-info-card h3{font-size:28px;line-height:1.08;margin:0 0 14px;color:#fff}
.story-info-card p{font-size:14px;line-height:1.58;color:rgba(255,255,255,.84);margin:0}
.story-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:auto;margin-bottom:18px}
.story-metrics div{padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.14)}
.story-metrics strong{display:block;font-size:22px;line-height:1;color:#fff;margin-bottom:5px}
.story-metrics span{font-size:11px;color:rgba(255,255,255,.72)}
.story-flow,.story-bars{height:42px;display:flex;align-items:flex-end;gap:8px}
.story-flow i{height:10px;flex:1;border-radius:999px;background:rgba(255,255,255,.24);position:relative}
.story-flow i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#ffb25d;transform:scaleX(var(--story-fill,.5));transform-origin:left}
.story-flow i:nth-child(2)::after{--story-fill:.82}.story-flow i:nth-child(3)::after{--story-fill:.64}.story-flow i:nth-child(4)::after{--story-fill:.92}.story-flow i:nth-child(5)::after{--story-fill:.72}
.story-bars i{width:16px;border-radius:8px 8px 2px 2px;background:linear-gradient(180deg,#ffbe73,#fff);opacity:.86}
.story-bars i:nth-child(1){height:18px}.story-bars i:nth-child(2){height:34px}.story-bars i:nth-child(3){height:25px}.story-bars i:nth-child(4){height:40px}.story-bars i:nth-child(5){height:30px}
.story-donut{display:flex;align-items:center;gap:14px;margin-top:auto;color:rgba(255,255,255,.76);font-size:12px}
.story-donut span{width:54px;height:54px;border-radius:50%;background:conic-gradient(#fff 0 72%,rgba(255,255,255,.17) 72%);position:relative}
.story-donut span::after{content:"";position:absolute;inset:11px;border-radius:50%;background:#be552d}
.story-network{position:relative;height:58px;margin-top:auto}
.story-network i{position:absolute;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.15)}
.story-network i:nth-child(1){left:7%;top:24px}.story-network i:nth-child(2){left:36%;top:5px}.story-network i:nth-child(3){left:65%;top:29px}.story-network i:nth-child(4){right:5%;top:9px}
.story-network::before,.story-network::after{content:"";position:absolute;left:10%;right:8%;top:27px;height:2px;background:rgba(255,255,255,.45);transform:rotate(-5deg)}
.story-network::after{transform:rotate(7deg);top:24px}
.platform-story-progress{width:min(420px,52vw);height:5px;border-radius:999px;background:rgba(24,116,158,.12);margin:12px auto 0;overflow:hidden}
.platform-story-progress span{display:block;width:100%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#159fd4,#f58220);transform:scaleX(var(--story-progress));transform-origin:left}

/* Keep floating actions separated. WhatsApp stays lowest; back-to-top sits above it. */
.whatsapp-float{right:22px!important;bottom:22px!important;z-index:160!important}
.back-to-top{right:26px!important;bottom:96px!important;z-index:159!important}
@media(max-width:700px){
  .whatsapp-float{right:16px!important;bottom:16px!important}
  .back-to-top{right:19px!important;bottom:82px!important}
}

@media(max-width:1080px){
  .platform-story{height:auto;overflow:visible}
  .platform-story-sticky{position:relative;height:auto;min-height:0;padding:88px 0 70px}
  .platform-story-viewport{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .platform-story-viewport::-webkit-scrollbar{display:none}
  .platform-story-track{transform:none!important;padding:4px 22px 24px}
  .story-card{width:min(82vw,410px);min-width:min(82vw,410px);height:390px;opacity:1!important;transform:none!important;scroll-snap-align:center}
  .platform-story-progress{display:none}
}
@media(max-width:560px){
  .platform-story-heading{padding-inline:18px}
  .platform-story-heading h2{font-size:36px}
  .story-card{height:370px;border-radius:24px}
  .story-info-card{padding:22px}
  .story-info-card h3{font-size:24px}
}
@media(prefers-reduced-motion:reduce){
  .platform-story{height:auto}
  .platform-story-sticky{position:relative;height:auto}
  .platform-story-track{transform:none!important;overflow-x:auto}
  .story-card{transform:none!important;opacity:1!important}
}

/* =========================================================================
   Local-server routing + refined smooth-scroll experience
   ========================================================================= */
html{
  scroll-behavior:smooth;
  scroll-padding-top:108px;
}
body{
  overscroll-behavior-y:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
section[id],div[id]{scroll-margin-top:108px}

/* Readable sticky story: shorter scroll distance and viewport-safe sizing. */
@media(min-width:1081px){
  .platform-story{
    height:330vh;
    min-height:2200px;
  }
  .platform-story-sticky{
    height:100svh;
    min-height:0;
    padding:84px 0 22px;
    justify-content:center;
  }
  .platform-story-heading{
    margin-bottom:18px;
    padding-inline:24px;
  }
  .platform-story-heading .section-kicker{margin-bottom:5px}
  .platform-story-heading h2{
    font-size:clamp(32px,3.45vw,52px);
    line-height:1.04;
    max-width:840px;
    margin:8px auto 10px;
  }
  .platform-story-heading p{
    max-width:720px;
    font-size:15.5px;
    line-height:1.55;
  }
  .platform-story-viewport{flex:0 0 auto}
  .platform-story-track{
    gap:16px;
    padding-top:3px;
    padding-bottom:14px;
  }
  .story-card{
    width:min(29vw,400px);
    min-width:325px;
    height:clamp(330px,48vh,385px);
    border-radius:26px;
  }
  .story-info-card{padding:24px}
  .story-card-top{margin-bottom:18px}
  .story-info-card h3{
    font-size:clamp(23px,2vw,27px);
    line-height:1.12;
    margin-bottom:10px;
  }
  .story-info-card p{
    font-size:13.5px;
    line-height:1.55;
  }
  .story-metrics{margin-bottom:14px}
  .story-image-label{left:21px;right:21px;bottom:18px}
  .story-image-label strong{font-size:19px}
  .platform-story-progress{margin-top:6px}
}

/* Prevent movement from feeling abrupt when cards change emphasis. */
.story-card{
  transition:box-shadow .38s cubic-bezier(.2,.8,.2,1),filter .38s ease;
}
.story-image-card img{
  transition:transform .8s cubic-bezier(.16,1,.3,1),filter .5s ease;
}
.reveal{
  transition-duration:.8s;
  transition-timing-function:cubic-bezier(.16,1,.3,1);
}
.btn,.feature-card,.solution-card,.related-card,.integ-tile,.usecase-card{
  transition-timing-function:cubic-bezier(.16,1,.3,1);
}

@media(max-height:760px) and (min-width:1081px){
  .platform-story-sticky{padding-top:70px;padding-bottom:14px}
  .platform-story-heading{margin-bottom:10px}
  .platform-story-heading h2{font-size:38px;margin-block:5px 7px}
  .platform-story-heading p{font-size:14px;line-height:1.45}
  .story-card{height:330px;min-width:310px;width:min(27vw,375px)}
  .story-info-card{padding:21px}
  .story-info-card h3{font-size:22px}
  .story-info-card p{font-size:12.75px}
  .story-card-top{margin-bottom:12px}
  .story-metrics div{padding:9px 11px}
  .story-metrics strong{font-size:19px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}


/* Unified typography */
button,input,select,textarea{font:inherit}


/* Bricolage Grotesque: headings and cards only */
h1,h2,h3,h4,h5,h6,
.section-title,.section-head h2,.hero h1{
  font-family:"Bricolage Grotesque","DM Sans",sans-serif;
}

[class*="card"],
[class*="card"] button,
[class*="card"] input,
[class*="card"] select,
[class*="card"] textarea,
.integ-tile,
.integration-stat,
.answer-box,
.page-toc,
.faq-item{
  font-family:"Bricolage Grotesque","DM Sans",sans-serif;
}

/* Keep general interface typography in the clean body font. */
.site-header,.main-nav,.nav-link,.dropdown-panel,
.btn,.breadcrumbs,.site-footer,
input,select,textarea,button{
  font-family:"Inter","DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* Buttons placed inside cards remain interface text, not display text. */
[class*="card"] .btn,[class*="card"] button{
  font-family:"Inter","DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* Refined letter spacing for Bricolage Grotesque display typography. */
h1,h2,h3,h4,h5,h6,
.section-title,.section-head h2,.hero h1{
  letter-spacing:1px;
}

[class*="card"] h1,
[class*="card"] h2,
[class*="card"] h3,
[class*="card"] h4,
[class*="card"] h5,
[class*="card"] h6,
.integ-tile strong,
.integration-stat strong,
.answer-box h2,.answer-box h3,
.page-toc > strong,.page-toc h4,
.faq-item .faq-question{
  letter-spacing:.8px;
}

[class*="card"] p,
[class*="card"] span,
[class*="card"] small,
.integ-tile small,
.integration-stat span{
  letter-spacing:.25px;
}

@media(max-width:700px){
  h1,h2,h3,h4,h5,h6,
  .section-title,.section-head h2,.hero h1{letter-spacing:.7px}
}


/* ===== Active navigation and interactive hero clouds ===== */
.nav-link.active,
.dropdown-trigger.active{
  color:#f26a2e !important;
  background:rgba(242,106,46,.10);
  box-shadow:inset 0 0 0 1px rgba(242,106,46,.14);
}
.dropdown-panel a.active{
  background:linear-gradient(135deg,rgba(85,190,238,.14),rgba(242,106,46,.10));
}
.dropdown-panel a.active strong{color:#f26a2e}
.dropdown-panel a.active small{color:#34536a}

.hero{--cloud-hover-x:0px;--cloud-hover-y:0px}
.hero-cloud{
  opacity:.38 !important;
  filter:brightness(1.18) saturate(.35) drop-shadow(0 10px 24px rgba(91,192,235,.10)) !important;
  will-change:transform,translate;
  transition:opacity .35s ease,filter .35s ease,translate .18s linear !important;
}
.hero:hover .hero-cloud{opacity:.58 !important;filter:brightness(1.26) saturate(.42) drop-shadow(0 14px 30px rgba(91,192,235,.14)) !important}
.hero-cloud.c1{translate:var(--cloud-x-1,0px) var(--cloud-y-1,0px)}
.hero-cloud.c2{translate:var(--cloud-x-2,0px) var(--cloud-y-2,0px)}
.hero-cloud.c3{translate:var(--cloud-x-3,0px) var(--cloud-y-3,0px)}
@media(max-width:700px){.hero-cloud{opacity:.26 !important}}
@media(prefers-reduced-motion:reduce){.hero-cloud{translate:none !important}}


/* ===== Enhanced six-layer hero cloud field ===== */
.hero{isolation:isolate}
.hero-cloud{
  pointer-events:none;
  z-index:0;
  transform-origin:center;
  backface-visibility:hidden;
  opacity:.48 !important;
  filter:brightness(1.22) saturate(.52) drop-shadow(0 14px 28px rgba(64,169,220,.15)) !important;
  transition:opacity .6s cubic-bezier(.22,1,.36,1),filter .6s cubic-bezier(.22,1,.36,1),translate .32s cubic-bezier(.22,1,.36,1) !important;
}
.hero:hover .hero-cloud{
  opacity:.72 !important;
  filter:brightness(1.3) saturate(.62) drop-shadow(0 18px 36px rgba(64,169,220,.22)) !important;
}
.hero-cloud.c1{top:7%;left:-7%;width:330px;translate:var(--cloud-x-1,0px) var(--cloud-y-1,0px);animation:cloudDriftRight 34s ease-in-out infinite alternate}
.hero-cloud.c2{top:18%;right:-6%;width:290px;translate:var(--cloud-x-2,0px) var(--cloud-y-2,0px);animation:cloudDriftLeft 40s ease-in-out infinite alternate}
.hero-cloud.c3{display:block;top:48%;left:5%;width:205px;opacity:.42 !important;translate:var(--cloud-x-3,0px) var(--cloud-y-3,0px);animation:cloudDriftRightSoft 30s ease-in-out infinite alternate}
.hero-cloud.c4{top:34%;right:12%;width:180px;opacity:.36 !important;translate:var(--cloud-x-4,0px) var(--cloud-y-4,0px);animation:cloudDriftLeftSoft 28s ease-in-out infinite alternate}
.hero-cloud.c5{top:62%;right:-3%;width:245px;opacity:.4 !important;translate:var(--cloud-x-5,0px) var(--cloud-y-5,0px);animation:cloudDriftRight 44s ease-in-out infinite alternate-reverse}
.hero-cloud.c6{top:70%;left:20%;width:145px;opacity:.28 !important;translate:var(--cloud-x-6,0px) var(--cloud-y-6,0px);animation:cloudDriftLeftSoft 36s ease-in-out infinite alternate-reverse}
.hero:hover .hero-cloud.c3,.hero:hover .hero-cloud.c4,.hero:hover .hero-cloud.c5{opacity:.58 !important}
.hero:hover .hero-cloud.c6{opacity:.42 !important}
@keyframes cloudDriftRight{0%{margin-left:-22px;margin-top:0}50%{margin-top:-10px}100%{margin-left:28px;margin-top:6px}}
@keyframes cloudDriftLeft{0%{margin-right:-18px;margin-top:5px}50%{margin-top:-8px}100%{margin-right:30px;margin-top:0}}
@keyframes cloudDriftRightSoft{0%{margin-left:-12px;margin-top:4px}100%{margin-left:20px;margin-top:-7px}}
@keyframes cloudDriftLeftSoft{0%{margin-right:-10px;margin-top:-4px}100%{margin-right:18px;margin-top:8px}}
@media(max-width:900px){
  .hero-cloud.c1{width:245px}.hero-cloud.c2{width:220px}.hero-cloud.c3{width:160px}.hero-cloud.c4{width:140px}.hero-cloud.c5{width:180px}.hero-cloud.c6{width:110px}
}
@media(max-width:700px){
  .hero-cloud{opacity:.34 !important}
  .hero-cloud.c4,.hero-cloud.c6{display:none}
  .hero-cloud.c3{display:block}
}
@media(prefers-reduced-motion:reduce){
  .hero-cloud{animation:none !important;translate:none !important}
}



/* ===== Final clean section spacing: no elastic or scroll transforms ===== */
html{
  scroll-behavior:smooth;
  scroll-padding-top:96px;
}
main > section,
.site-main > section,
body > section{
  scroll-margin-top:96px;
}
.section{
  padding-top:clamp(82px,7vw,112px);
  padding-bottom:clamp(82px,7vw,112px);
}
.section + .section{
  border-top:1px solid rgba(66,121,154,.08);
}
.section-head{
  margin-bottom:clamp(38px,4vw,56px);
}
.section-head p{
  margin-top:0;
}
.section .container-wide,
.section .container-narrow{
  position:relative;
}
/* Keep special sections controlled by their own layouts. */
.hero{
  padding-top:clamp(130px,12vw,178px);
  padding-bottom:clamp(90px,8vw,130px);
}
.platform-story{
  padding-top:0;
  padding-bottom:0;
}
.cta-section{
  padding-top:clamp(74px,6vw,96px);
  padding-bottom:clamp(74px,6vw,96px);
}
@media(max-width:900px){
  .section{
    padding-top:clamp(64px,9vw,82px);
    padding-bottom:clamp(64px,9vw,82px);
  }
  .section-head{margin-bottom:36px}
  .hero{
    padding-top:120px;
    padding-bottom:84px;
  }
}
@media(max-width:640px){
  .section{
    padding-top:58px;
    padding-bottom:58px;
  }
  .section-head{margin-bottom:30px}
  .hero{
    padding-top:105px;
    padding-bottom:72px;
  }
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
}


/* ===== 2026 homepage app journey and insights upgrade ===== */
.reading-progress{display:none!important}
.page-scroll-rail{position:fixed;left:18px;top:50%;width:12px;height:190px;transform:translateY(-50%);border-radius:999px;background:rgba(255,255,255,.78);border:1px solid rgba(31,100,137,.14);box-shadow:0 12px 30px rgba(20,67,94,.10);z-index:150;overflow:hidden;backdrop-filter:blur(12px)}
.page-scroll-rail::before{content:"";position:absolute;left:3px;right:3px;top:7px;bottom:7px;border-radius:999px;background:#dceff8}
.page-scroll-fill{position:absolute;left:3px;right:3px;top:7px;height:calc((100% - 14px) * var(--page-progress,0));border-radius:999px;background:linear-gradient(180deg,#35aee5,#f58220);transition:height .12s linear}
.page-scroll-dot{position:absolute;left:50%;top:calc(7px + (100% - 14px) * var(--page-progress,0));width:18px;height:18px;border-radius:50%;transform:translate(-50%,-50%);background:#fff;border:4px solid #f58220;box-shadow:0 5px 14px rgba(245,130,32,.28);transition:top .12s linear}
@media(max-width:900px){.page-scroll-rail{display:none}}

.app-hero-scroll{height:455vh;position:relative;background:linear-gradient(180deg,#dff4ff 0%,#f6fbff 54%,#fff 100%);isolation:isolate}
.app-hero-sticky{position:sticky;top:0;height:100vh;min-height:690px;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:92px 0 24px}
.app-hero-heading{text-align:center;max-width:880px;margin:0 auto 18px;position:relative;z-index:4}
.app-hero-heading h1{font-size:clamp(42px,5vw,72px);line-height:1.01;margin:10px 0 12px;color:#103751}
.app-hero-heading p{max-width:760px;margin:0 auto;color:#527083;font-size:16px;line-height:1.55}
.app-hero-viewport{overflow:hidden;position:relative;z-index:5;width:100%;padding:8px 0 4px}
.app-hero-track{display:flex;gap:28px;width:max-content;padding:0 max(6vw,70px);transform:translate3d(var(--app-hero-x,0px),0,0);will-change:transform}
.app-hero-card{width:min(78vw,1000px);min-width:min(78vw,1000px);height:min(520px,55vh);min-height:430px;border-radius:38px;display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:32px;padding:44px 50px;position:relative;overflow:hidden;border:1px solid rgba(36,112,151,.13);box-shadow:0 28px 70px rgba(22,86,121,.12);background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(236,248,255,.96));transform:translate3d(0,var(--app-card-y,14px),0) scale(var(--app-card-scale,.94));opacity:var(--app-card-opacity,.66);transition:box-shadow .35s ease;will-change:transform,opacity}
.app-hero-card::before{content:"";position:absolute;width:320px;height:320px;border-radius:50%;right:-90px;top:-110px;background:radial-gradient(circle,rgba(53,174,229,.18),transparent 70%)}
.app-card-orange::after{content:"";position:absolute;left:-100px;bottom:-120px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(245,130,32,.17),transparent 70%)}
.app-card-copy,.app-card-visual{position:relative;z-index:2}
.app-card-index{display:block;color:#7a9caf;font-weight:800;font-size:13px;letter-spacing:.12em;margin-bottom:12px}
.app-card-copy h2{font-size:clamp(32px,3vw,48px);margin:8px 0 3px;color:#103751}
.app-card-copy h3{font-size:20px;color:#f58220;margin:0 0 13px}
.app-card-copy p{font-size:15.5px;line-height:1.6;color:#506d7f;max-width:530px}
.app-card-points{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 22px}.app-card-points span{padding:7px 11px;border-radius:999px;background:#e9f6fd;color:#1c719b;font-size:12px;font-weight:700;border:1px solid #d1eaf7}
.app-card-visual{display:grid;place-items:center;height:100%}.app-orbit{position:absolute;border:1px dashed rgba(40,138,183,.24);border-radius:50%;animation:appOrbit 18s linear infinite}.orbit-one{width:310px;height:310px}.orbit-two{width:390px;height:390px;animation-direction:reverse;animation-duration:25s}@keyframes appOrbit{to{transform:rotate(360deg)}}
.app-phone{width:238px;height:448px;border-radius:38px;background:#112f44;border:8px solid #183e56;padding:10px;box-shadow:0 30px 60px rgba(15,55,79,.24);position:relative;z-index:3;transform:rotate(-2deg)}
.phone-top{height:30px;display:flex;align-items:center;justify-content:space-between;color:#dcecf5;font-size:10px;padding:0 8px}.phone-top span{width:44px;height:5px;border-radius:99px;background:#274d64}.phone-top b{font-size:12px}.phone-top i{font-style:normal}
.phone-screen{height:370px;border-radius:27px;background:linear-gradient(180deg,#eef9ff,#fff);padding:18px 14px;overflow:hidden}.phone-greeting small{color:#f58220;font-weight:800}.phone-greeting h4{font-size:20px;color:#103751;margin:3px 0 12px}.phone-hero-icon{width:54px;height:54px;border-radius:18px;background:linear-gradient(145deg,#d7f2ff,#fff0e3);display:grid;place-items:center;margin-bottom:12px}.phone-hero-icon svg{width:28px;height:28px;stroke:#168fc3;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.phone-list{display:grid;gap:8px}.phone-row{padding:9px 10px;border-radius:12px;background:#fff;border:1px solid #deedf4;display:flex;justify-content:space-between;gap:8px;font-size:10px;color:#6a8492}.phone-row strong{color:#174d6a;font-size:10px}.phone-chart{height:58px;margin-top:13px;display:flex;align-items:flex-end;gap:6px;padding:8px;border-radius:13px;background:#eaf6fc}.phone-chart i{flex:1;border-radius:7px 7px 3px 3px;background:linear-gradient(180deg,#35aee5,#f58220)}.phone-chart i:nth-child(1){height:34%}.phone-chart i:nth-child(2){height:70%}.phone-chart i:nth-child(3){height:48%}.phone-chart i:nth-child(4){height:88%}.phone-chart i:nth-child(5){height:62%}.phone-home{width:48px;height:5px;border-radius:99px;background:#45677a;margin:8px auto 0}
.app-hero-progress{display:flex;align-items:center;gap:14px;width:min(620px,70vw);margin:10px auto 0;position:relative;z-index:5;color:#638093;font-size:12px;font-weight:700}.app-hero-progress::before{content:"";height:5px;border-radius:999px;background:#d5eaf5;flex:1}.app-hero-progress span{position:absolute;left:0;top:7px;height:5px;width:calc((100% - 120px) * var(--app-progress,0));border-radius:999px;background:linear-gradient(90deg,#35aee5,#f58220)}
.app-cloud{position:absolute;opacity:.34;pointer-events:none;filter:brightness(1.2) saturate(.5);z-index:1}.app-cloud-one{width:340px;left:-4%;top:14%;animation:cloudDriftRight 32s ease-in-out infinite alternate}.app-cloud-two{width:300px;right:-4%;top:57%;animation:cloudDriftLeft 38s ease-in-out infinite alternate}

.client-logo-card{min-width:220px!important;height:112px!important;padding:16px 22px!important}.client-logo-card img{width:auto!important;max-width:180px!important;height:76px!important;filter:none!important;opacity:1!important;object-fit:contain}.logo-track{gap:22px!important}

.home-blog-section{background:linear-gradient(180deg,#f5fbff,#fff7ef)}.section-head-split{display:flex;align-items:end;justify-content:space-between;gap:30px}.blog-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.blog-card{padding:28px;border-radius:26px;background:#fff;border:1px solid rgba(38,112,149,.14);box-shadow:0 16px 38px rgba(28,89,121,.07);display:flex;flex-direction:column;min-height:260px}.blog-card:nth-child(2){background:linear-gradient(145deg,#fff,#eef8ff)}.blog-card:nth-child(3){background:linear-gradient(145deg,#fff,#fff1e5)}.blog-category{font-size:12px;font-weight:800;color:#f58220;letter-spacing:.07em;text-transform:uppercase}.blog-card h3{font-size:22px;color:#133c56;margin:14px 0 10px}.blog-card p{color:#5c7484;line-height:1.6}.blog-card a{margin-top:auto;color:#0b84b8;font-weight:800}
.blog-hero{padding:160px 0 90px;text-align:center;background:linear-gradient(180deg,#dff4ff,#fff5e9)}.blog-hero h1{font-size:clamp(44px,6vw,76px);line-height:1.04;color:#103751;max-width:1000px;margin:12px auto}.blog-hero p{color:#567386;font-size:18px}.blog-list-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.blog-feature{padding:34px;border-radius:28px;background:#fff;border:1px solid rgba(36,112,151,.13);box-shadow:0 16px 44px rgba(22,86,121,.07)}.blog-feature:nth-child(3n+2){background:linear-gradient(145deg,#fff,#eef8ff)}.blog-feature:nth-child(3n){background:linear-gradient(145deg,#fff,#fff1e5)}.blog-feature h2{font-size:28px;color:#123d57;margin:13px 0}.blog-feature p{color:#587183;line-height:1.7}.source-link{display:inline-block;margin-top:14px;color:#0b84b8;font-weight:800}

.app-page-hero{padding:150px 0 100px;background:linear-gradient(180deg,#dff4ff,#fff);min-height:auto}.app-page-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:70px}.app-page-phone{display:grid;place-items:center}.app-detail-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.app-detail-card{padding:26px;border-radius:24px;background:linear-gradient(145deg,#fff,#eef8ff);border:1px solid #d9edf7;box-shadow:0 12px 30px rgba(23,84,115,.06)}.app-detail-icon{width:52px;height:52px;border-radius:17px;background:#e1f4fd;display:grid;place-items:center}.app-detail-icon svg{width:26px;height:26px;stroke:#168fc3;fill:none;stroke-width:1.8}.app-detail-card h3{font-size:20px;color:#153e57;margin:15px 0 8px}.app-detail-card p{font-size:14px;color:#607887;line-height:1.6}.app-why-grid,.app-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}.app-number-callout{margin-top:22px;padding:20px 22px;border-radius:20px;background:#fff2e6;border-left:5px solid #f58220;color:#765138;font-weight:650;line-height:1.55}.app-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.app-step{padding:24px;border-radius:24px;background:#fff;border:1px solid #d8edf7}.app-step>span{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:linear-gradient(145deg,#35aee5,#f58220);color:#fff;font-weight:900}.app-step h3{font-size:19px;color:#153e57;margin:14px 0 7px}.app-step p{font-size:14px;color:#637987;line-height:1.55}.app-choice-phone{display:grid;place-items:center}
.app-menu{min-width:340px!important}.app-menu a{padding:13px 15px!important}

@media(max-width:1080px){.app-hero-scroll{height:auto}.app-hero-sticky{position:relative;height:auto;min-height:0;padding:130px 0 60px}.app-hero-viewport{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.app-hero-track{transform:none!important;padding:0 24px 20px}.app-hero-card{min-width:min(86vw,760px);width:min(86vw,760px);height:auto;min-height:560px;scroll-snap-align:center;transform:none!important;opacity:1!important}.app-hero-progress{display:none}.app-detail-grid,.app-steps{grid-template-columns:repeat(2,1fr)}.blog-card-grid{grid-template-columns:1fr}.blog-list-grid{grid-template-columns:1fr}}
@media(max-width:760px){.app-hero-heading{padding:0 20px}.app-hero-heading h1{font-size:42px}.app-hero-card{grid-template-columns:1fr;min-height:760px;padding:30px 24px}.app-card-visual{order:-1;height:390px}.app-phone{transform:scale(.88)}.app-page-hero-grid,.app-why-grid,.app-choice-grid{grid-template-columns:1fr}.app-detail-grid,.app-steps{grid-template-columns:1fr}.section-head-split{display:block}.section-head-split .btn{margin-top:18px}.client-logo-card{min-width:180px!important;height:96px!important}.client-logo-card img{max-width:148px!important;height:64px!important}}
@media(prefers-reduced-motion:reduce){.app-hero-scroll{height:auto}.app-hero-sticky{position:relative;height:auto}.app-hero-track{transform:none!important;overflow-x:auto}.app-hero-card{transform:none!important;opacity:1!important}.app-orbit,.app-cloud{animation:none!important}}


/* ===== V3 refined app journey, circular progress and original insights ===== */
.page-scroll-rail{display:none!important}
.page-scroll-circle{--page-progress:0;position:fixed;left:24px;bottom:24px;width:58px;height:58px;border-radius:50%;z-index:1200;display:grid;place-items:center;background:rgba(255,255,255,.88);box-shadow:0 12px 32px rgba(16,55,81,.16);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.page-scroll-circle svg{width:48px;height:48px;transform:rotate(-90deg)}
.page-scroll-circle .track{fill:none;stroke:#dcecf3;stroke-width:4}
.page-scroll-circle .value{fill:none;stroke:url(#pageProgressGradient);stroke-width:5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:var(--page-dash,100);transition:stroke-dashoffset .12s linear}
.page-scroll-circle::after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:#f58220;box-shadow:0 0 0 5px rgba(245,130,32,.12)}

.app-journey-scroll{height:390vh;position:relative;background:linear-gradient(180deg,#e8f8ff 0%,#f5fbff 54%,#fff 100%);isolation:isolate}
.app-journey-sticky{position:sticky;top:0;height:100vh;min-height:680px;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:88px 0 28px}
.app-journey-intro{text-align:center;position:relative;z-index:2;margin-bottom:18px}
.app-journey-intro h2{font-size:clamp(34px,4.4vw,58px);line-height:1.06;max-width:900px;margin:10px auto 12px;color:#102d46}
.app-journey-intro p{max-width:760px;margin:0 auto;color:#5c7282;font-size:16px;line-height:1.6}
.app-journey-viewport{width:100%;overflow:hidden;position:relative}
.app-journey-track{display:flex;width:max-content;transform:translate3d(var(--app-journey-x,0),0,0);will-change:transform}
.app-journey-panel{width:100vw;min-width:100vw;min-height:430px;display:grid;grid-template-columns:minmax(110px,18vw) minmax(0,760px);justify-content:center;align-items:center;gap:clamp(32px,6vw,96px);padding:28px max(7vw,42px);opacity:var(--app-panel-opacity,.42);transform:translate3d(0,var(--app-panel-y,16px),0);transition:opacity .18s linear;will-change:opacity,transform}
.app-journey-number{font-family:"Bricolage Grotesque",sans-serif;font-size:clamp(92px,15vw,210px);line-height:.8;font-weight:800;letter-spacing:-.06em;color:rgba(53,174,229,.13);text-align:right;user-select:none}
.app-journey-copy{max-width:760px}
.app-journey-copy h3{font-size:clamp(38px,5vw,68px);line-height:1.02;color:#103751;margin:10px 0 14px}
.app-journey-copy p{font-size:clamp(16px,1.4vw,19px);line-height:1.65;color:#547083;max-width:720px}
.app-journey-copy ul{display:flex;flex-wrap:wrap;gap:10px 18px;margin:22px 0 26px;padding:0;list-style:none}
.app-journey-copy li{position:relative;padding-left:18px;color:#315d73;font-weight:700}
.app-journey-copy li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:#f58220}
.app-journey-status{width:min(560px,70vw);height:4px;border-radius:999px;background:#d7eaf3;margin:3px auto 0;position:relative}
.app-journey-status span{position:absolute;inset:0 auto 0 0;width:calc(100% * var(--app-journey-progress,0));border-radius:inherit;background:linear-gradient(90deg,#35aee5,#f58220);transition:width .08s linear}
.app-journey-status b{position:absolute;top:12px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#78909d;white-space:nowrap}

.home-blog-section{background:linear-gradient(180deg,#f5fbff,#fff7ef)}
.blog-card{min-height:300px;padding:32px;border-radius:28px}
.blog-card h3{font-size:24px;line-height:1.2}
.blog-card p{font-size:15px;line-height:1.7}
.blog-feature{position:relative;overflow:hidden;padding:38px}
.blog-feature::after{content:"";position:absolute;width:130px;height:130px;border-radius:50%;right:-52px;top:-52px;background:radial-gradient(circle,rgba(53,174,229,.12),transparent 70%)}
.blog-takeaway{margin-top:22px;padding:18px 20px;border-radius:18px;background:#eef8fd;border-left:4px solid #f58220;display:grid;gap:5px;color:#496879}
.blog-takeaway strong{color:#143f59}
.source-link{display:none!important}

@media(max-width:1080px){
 .app-journey-scroll{height:auto}
 .app-journey-sticky{position:relative;height:auto;min-height:0;padding:110px 0 64px}
 .app-journey-viewport{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
 .app-journey-track{transform:none!important}
 .app-journey-panel{min-width:88vw;width:88vw;grid-template-columns:110px 1fr;scroll-snap-align:center;padding:36px 36px;opacity:1!important;transform:none!important}
 .app-journey-status{display:none}
}
@media(max-width:760px){
 .page-scroll-circle{display:none}
 .app-journey-intro{padding:0 22px}
 .app-journey-panel{min-width:92vw;width:92vw;grid-template-columns:1fr;gap:10px;padding:34px 24px;align-content:center}
 .app-journey-number{text-align:left;font-size:82px}
 .app-journey-copy h3{font-size:39px}
 .app-journey-copy ul{display:grid}
}
@media(prefers-reduced-motion:reduce){.app-journey-scroll{height:auto}.app-journey-sticky{position:relative;height:auto}.app-journey-track{transform:none!important;overflow-x:auto}.app-journey-panel{opacity:1!important;transform:none!important}}

/* ===== V3.1 readability and client-logo image sizing ===== */
@media (min-width:1081px){
  .app-journey-sticky{
    padding:clamp(104px,12vh,138px) 0 clamp(54px,7vh,82px);
    justify-content:flex-start;
  }
  .app-journey-intro{
    margin-bottom:clamp(28px,4vh,48px);
    padding:0 max(7vw,56px);
  }
  .app-journey-intro p{
    max-width:840px;
    font-size:17px;
    line-height:1.75;
  }
  .app-journey-viewport{
    flex:1;
    display:flex;
    align-items:center;
    min-height:500px;
  }
  .app-journey-panel{
    min-height:520px;
    grid-template-columns:minmax(130px,17vw) minmax(0,860px);
    gap:clamp(46px,6.5vw,112px);
    padding:clamp(52px,7vh,82px) max(10vw,88px);
  }
  .app-journey-copy{
    max-width:860px;
    padding:18px 0 26px;
  }
  .app-journey-copy h3{
    margin:12px 0 22px;
  }
  .app-journey-copy p{
    max-width:820px;
    font-size:clamp(18px,1.45vw,20px);
    line-height:1.78;
  }
  .app-journey-copy ul{
    gap:14px 24px;
    margin:28px 0 34px;
  }
  .app-journey-copy li{
    line-height:1.55;
  }
  .app-journey-status{
    margin-top:18px;
  }
}

/* Enlarge the logo artwork only; keep the existing card footprint unchanged. */
.client-logo-card{
  overflow:visible;
}
.client-logo-card img{
  max-width:205px!important;
  max-height:88px!important;
  height:auto!important;
  transform:scale(1.16);
  transform-origin:center;
}
.client-logo-card:hover img{
  transform:scale(1.22);
}

@media (max-width:1080px){
  .app-journey-sticky{padding:120px 0 78px}
  .app-journey-intro{margin-bottom:32px;padding:0 38px}
  .app-journey-panel{
    min-width:92vw;
    width:92vw;
    min-height:590px;
    padding:58px 56px;
    gap:34px;
  }
  .app-journey-copy{max-width:760px;padding:12px 0 22px}
  .app-journey-copy p{font-size:18px;line-height:1.75}
  .app-journey-copy ul{margin:26px 0 32px;gap:13px 20px}
  .client-logo-card img{max-width:188px!important;max-height:80px!important;transform:scale(1.13)}
}

@media (max-width:760px){
  .app-journey-sticky{padding:92px 0 58px}
  .app-journey-intro{padding:0 26px;margin-bottom:24px}
  .app-journey-panel{
    min-width:94vw;
    width:94vw;
    min-height:660px;
    padding:48px 32px 56px;
    gap:18px;
  }
  .app-journey-copy{padding:4px 0 18px}
  .app-journey-copy h3{margin:8px 0 18px}
  .app-journey-copy p{font-size:17px;line-height:1.72}
  .app-journey-copy ul{margin:24px 0 30px;gap:14px}
  .client-logo-card img{max-width:166px!important;max-height:72px!important;transform:scale(1.1)}
}

/* ===== Readable staged app journey + expanded insights ===== */
.app-journey-scroll{height:560vh}
.app-journey-sticky{padding:104px 0 42px;justify-content:flex-start}
.app-journey-intro{margin:0 auto 34px;padding:0 7vw;text-align:left;width:100%;max-width:1320px}
.app-journey-intro h2{max-width:980px;margin:10px 0 0;font-size:clamp(36px,4.5vw,62px)}
.app-journey-viewport{flex:1;display:flex;align-items:center;min-height:0}
.app-journey-panel{min-height:500px;grid-template-columns:minmax(120px,16vw) minmax(0,820px);gap:clamp(40px,7vw,112px);padding:44px max(10vw,72px);opacity:1!important;transform:none!important;transition:none!important}
.app-journey-copy{max-width:820px;padding:18px 0 34px}
.app-journey-copy h3{font-size:clamp(42px,5vw,72px);margin:12px 0 22px}
.app-journey-copy p{font-size:clamp(18px,1.55vw,21px);line-height:1.78;max-width:790px;color:#45677b}
.app-journey-copy ul{margin:30px 0 36px;gap:15px 26px}
.app-journey-copy li{font-size:16px;line-height:1.55}
.app-journey-copy .btn{min-height:52px;padding:14px 24px;font-size:15px;box-shadow:0 12px 28px rgba(20,124,170,.16)}
.app-journey-number{font-size:clamp(104px,15vw,220px);color:rgba(53,174,229,.16)}

.insight-card-top,.insight-index-top{display:flex;justify-content:space-between;align-items:center;gap:16px}
.insight-read-time,.insight-index-top>span:last-child{font-size:12px;font-weight:800;color:#728895}
.insight-card{position:relative;overflow:hidden;min-height:350px;padding:34px}
.insight-card::before,.insight-index-card::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,#35aee5,#f58220)}
.insight-card h3{font-size:26px;line-height:1.2;margin:20px 0 14px}
.insight-card p{font-size:16px;line-height:1.75}
.insight-meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:24px;padding-top:18px;border-top:1px solid rgba(28,91,122,.12);font-size:12px;font-weight:700;color:#78909d}
.insight-link{display:inline-flex;align-items:center;gap:10px;margin-top:22px;color:#087fab;font-weight:850}
.insight-link span{transition:transform .2s ease}.insight-link:hover span{transform:translateX(5px)}

.insights-hero{padding:170px 0 94px;background:radial-gradient(circle at 82% 10%,rgba(245,130,32,.18),transparent 28%),linear-gradient(135deg,#e5f7ff 0%,#f7fcff 55%,#fff1e5 100%)}
.insights-hero-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.65fr);gap:70px;align-items:end}
.insights-hero h1{font-size:clamp(48px,6vw,78px);line-height:1.02;max-width:900px;margin:18px 0 22px;color:#102f48}
.insights-hero p{font-size:19px;line-height:1.75;max-width:760px;color:#526e7f}
.insights-hero-note{padding:28px;border-radius:26px;background:rgba(255,255,255,.72);border:1px solid rgba(28,100,136,.13);box-shadow:0 18px 48px rgba(26,88,120,.09);display:grid;gap:10px}
.insights-hero-note strong{font-size:18px;color:#173f58}.insights-hero-note span{line-height:1.65;color:#607989}
.insights-index-section{background:linear-gradient(180deg,#fff,#f6fbfe)}
.insights-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.insight-index-card{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:390px;padding:38px;border-radius:30px;background:#fff;border:1px solid rgba(31,102,139,.14);box-shadow:0 18px 46px rgba(27,87,117,.08)}
.insight-index-card:nth-child(3n+2){background:linear-gradient(145deg,#fff,#eef9ff)}
.insight-index-card:nth-child(3n){background:linear-gradient(145deg,#fff,#fff3e9)}
.insight-index-card h2{font-size:31px;line-height:1.16;margin:22px 0 16px;color:#143b54}
.insight-index-card>p{font-size:16px;line-height:1.75;color:#5b7484}
.insight-index-card .insight-link{margin-top:auto;padding-top:26px}

.container-narrow{width:min(1120px,calc(100% - 48px));margin-inline:auto}
.insight-article-header{padding:164px 0 82px;background:radial-gradient(circle at 86% 14%,rgba(245,130,32,.18),transparent 28%),linear-gradient(135deg,#e5f7ff,#f8fcff 58%,#fff0e4)}
.article-back{display:inline-flex;margin-bottom:34px;color:#176f96;font-weight:800}
.insight-article-header h1{font-size:clamp(48px,6.5vw,82px);line-height:1.01;max-width:1000px;margin:18px 0 24px;color:#102e47}
.article-dek{font-size:21px;line-height:1.72;max-width:850px;color:#506d7f}
.article-byline{display:flex;flex-wrap:wrap;gap:13px 28px;margin-top:34px;padding-top:24px;border-top:1px solid rgba(25,91,125,.14);font-size:14px;color:#657e8d}
.article-byline strong{color:#173f57}
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:80px;padding-top:84px;padding-bottom:110px;align-items:start}
.article-content{max-width:760px}
.article-lead{font-size:17px;line-height:1.8;padding:24px 26px;border-left:5px solid #35aee5;background:#eff9fe;border-radius:0 18px 18px 0;color:#476779;margin:0 0 52px}
.article-section{margin:0 0 50px}.article-section h2{font-size:34px;line-height:1.18;color:#143b54;margin:0 0 16px}.article-section p{font-size:18px;line-height:1.86;color:#506c7c}
.article-takeaway{margin:64px 0;padding:34px;border-radius:26px;background:linear-gradient(135deg,#0e7199,#0f93bd);color:#fff;box-shadow:0 20px 46px rgba(15,113,153,.22)}
.article-takeaway span{display:block;font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#bdefff;margin-bottom:12px}.article-takeaway strong{font-size:24px;line-height:1.5}
.article-source{padding:32px;border-radius:26px;background:#fff7ef;border:1px solid rgba(245,130,32,.2)}
.article-source>span{font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#d66c13}.article-source h2{font-size:24px;line-height:1.35;margin:12px 0}.article-source p{line-height:1.7;color:#677b86}.article-source a{display:inline-block;margin-top:12px;font-weight:850;color:#0a7da9}
.article-side{position:sticky;top:120px;display:grid;gap:18px}.article-side>div{padding:28px;border-radius:24px;background:#f6fbfe;border:1px solid rgba(26,97,132,.13)}.article-side>div>span{font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#f58220}.article-side p{margin:20px 0 0;line-height:1.6;color:#738894}.article-side strong{color:#173f57}

@media(max-width:1080px){
 .app-journey-scroll{height:auto}.app-journey-sticky{padding:112px 0 72px}.app-journey-intro{text-align:center}.app-journey-intro h2{margin-inline:auto}.app-journey-panel{padding:46px 46px;min-height:620px}.app-journey-copy p{font-size:18px}
 .insights-hero-grid,.article-layout{grid-template-columns:1fr}.article-side{position:static;max-width:520px}.insights-card-grid{grid-template-columns:1fr}
}
@media(max-width:720px){
 .app-journey-panel{padding:40px 28px;min-height:650px}.app-journey-copy h3{font-size:40px}.app-journey-copy p{font-size:17px;line-height:1.75}
 .insights-hero{padding:140px 0 72px}.insights-hero h1,.insight-article-header h1{font-size:44px}.insights-hero-grid{gap:34px}.insight-index-card{padding:28px;min-height:360px}.insight-index-card h2{font-size:27px}
 .container-narrow{width:min(100% - 32px,1120px)}.insight-article-header{padding:138px 0 60px}.article-dek{font-size:18px}.article-layout{padding-top:58px;gap:50px}.article-section h2{font-size:29px}.article-section p{font-size:17px}.article-takeaway strong{font-size:21px}
}

/* ===== Final centered, fully readable mobile-app journey ===== */
@media (min-width:1081px){
  .app-journey-scroll{height:620vh}
  .app-journey-sticky{
    height:100vh;
    min-height:680px;
    padding:86px 0 22px;
    justify-content:flex-start;
  }
  .app-journey-intro{
    width:min(100% - 64px,1120px);
    margin:0 auto 12px;
    padding:0;
    text-align:center;
    flex:0 0 auto;
  }
  .app-journey-intro h2{
    max-width:920px;
    margin:8px auto 0;
    font-size:clamp(32px,3.65vw,52px);
    line-height:1.08;
  }
  .app-journey-viewport{
    flex:1 1 auto;
    min-height:0;
    display:flex;
    align-items:center;
    overflow:hidden;
  }
  .app-journey-track{align-items:stretch}
  .app-journey-panel{
    position:relative;
    width:100vw;
    min-width:100vw;
    min-height:0;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:26px clamp(56px,8vw,132px) 40px;
    text-align:center;
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }
  .app-journey-number{
    position:absolute;
    inset:50% auto auto 50%;
    transform:translate(-50%,-50%);
    z-index:0;
    width:100%;
    text-align:center;
    font-size:clamp(150px,19vw,270px);
    line-height:1;
    color:rgba(53,174,229,.085);
    pointer-events:none;
  }
  .app-journey-copy{
    position:relative;
    z-index:1;
    width:min(100%,900px);
    max-width:900px;
    margin:0 auto;
    padding:8px 0 14px;
    text-align:center;
  }
  .app-journey-copy .section-kicker{display:inline-flex;justify-content:center}
  .app-journey-copy h3{
    max-width:900px;
    margin:10px auto 15px;
    font-size:clamp(36px,4.2vw,58px);
    line-height:1.04;
  }
  .app-journey-copy p{
    max-width:820px;
    margin:0 auto;
    font-size:clamp(17px,1.22vw,19px);
    line-height:1.7;
  }
  .app-journey-copy ul{
    justify-content:center;
    margin:20px auto 24px;
    gap:10px 22px;
  }
  .app-journey-copy li{font-size:15px;line-height:1.45;text-align:left}
  .app-journey-copy .btn{min-height:48px;padding:12px 22px;font-size:14px}
}

@media (min-width:1081px) and (max-height:760px){
  .app-journey-sticky{padding-top:72px}
  .app-journey-intro{margin-bottom:4px}
  .app-journey-intro h2{font-size:clamp(29px,3.2vw,44px)}
  .app-journey-panel{padding-top:12px;padding-bottom:22px}
  .app-journey-copy h3{font-size:clamp(33px,3.8vw,50px);margin-bottom:12px}
  .app-journey-copy p{font-size:16.5px;line-height:1.58}
  .app-journey-copy ul{margin:16px auto 19px}
  .app-journey-copy .btn{min-height:44px;padding:10px 20px}
}


/* ===== Controlled one-step mobile app journey ===== */
@media (min-width:1081px){
  .app-journey-scroll{height:430vh!important}
  .app-journey-sticky{height:100vh;min-height:680px;padding:84px 0 18px!important;justify-content:flex-start!important}
  .app-journey-intro{width:min(100% - 64px,1160px)!important;margin:0 auto 8px!important;padding:0!important;text-align:center!important}
  .app-journey-intro h2{max-width:900px!important;margin:8px auto 0!important;font-size:clamp(31px,3.5vw,50px)!important;line-height:1.08!important}
  .app-journey-viewport{flex:1 1 auto;min-height:0;display:flex;align-items:center;overflow:hidden}
  .app-journey-track{height:100%;align-items:stretch;transition:none!important}
  .app-journey-panel{width:100vw;min-width:100vw;height:100%;min-height:0;display:grid!important;grid-template-columns:minmax(250px,330px) minmax(0,720px)!important;align-items:center!important;justify-content:center!important;gap:clamp(48px,6vw,96px)!important;padding:20px clamp(54px,7vw,110px) 34px!important;text-align:left!important;opacity:1!important;transform:none!important;transition:none!important}
  .app-journey-copy{width:100%!important;max-width:720px!important;margin:0!important;padding:0!important;text-align:left!important}
  .app-journey-copy .section-kicker{display:inline-flex!important;justify-content:flex-start!important}
  .app-journey-copy h3{max-width:720px!important;margin:10px 0 15px!important;font-size:clamp(38px,4vw,57px)!important;line-height:1.04!important}
  .app-journey-copy p{max-width:700px!important;margin:0!important;font-size:clamp(17px,1.18vw,19px)!important;line-height:1.68!important}
  .app-journey-copy ul{justify-content:flex-start!important;margin:20px 0 25px!important;gap:10px 20px!important}
  .app-journey-copy li{font-size:15px!important;line-height:1.45!important;text-align:left!important}
  .app-journey-copy .btn{min-width:112px;justify-content:center;min-height:47px!important;padding:11px 24px!important;font-size:14px!important}
  .app-journey-number{display:none!important}
  .app-phone{width:100%;display:flex;justify-content:center;align-items:center;perspective:1000px}
  .app-phone-shell{position:relative;width:min(278px,23vw);aspect-ratio:9/18.6;border:9px solid #153b50;border-radius:38px;background:#fff;box-shadow:0 28px 64px rgba(20,73,99,.22),0 8px 20px rgba(20,73,99,.12);overflow:hidden;transform:none}
  .app-phone-notch{position:absolute;z-index:5;left:50%;top:7px;transform:translateX(-50%);width:40%;height:22px;border-radius:0 0 15px 15px;background:#153b50}
  .app-phone-screen{position:absolute;inset:0;padding:38px 16px 18px;background:linear-gradient(180deg,#f6fcff 0%,#eef9ff 54%,#fff 100%);display:flex;flex-direction:column;gap:16px}
  .app-phone-top{display:flex;align-items:center;justify-content:space-between;color:#173f57}.app-phone-brand{font-size:10px;letter-spacing:.14em;font-weight:900}.app-phone-avatar{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#dff5ff;color:#35aee5;font-size:8px}
  .app-phone-hero{padding:16px 14px;border-radius:21px;background:linear-gradient(135deg,#dff6ff,#fff1e4);display:flex;align-items:center;gap:12px;box-shadow:0 10px 24px rgba(26,102,138,.09)}
  .app-phone-hero-icon{width:43px;height:43px;border-radius:15px;display:grid;place-items:center;background:#35aee5;color:#fff;font-size:21px;font-weight:900;box-shadow:0 8px 18px rgba(53,174,229,.25)}
  .app-phone-hero small{display:block;font-size:8px;letter-spacing:.07em;text-transform:uppercase;color:#668392;margin-bottom:4px}.app-phone-hero strong{display:block;font-size:15px;line-height:1.15;color:#153b50}
  .app-phone-cards{display:grid;gap:10px}.app-phone-mini{min-height:54px;padding:11px 12px;border-radius:16px;background:#fff;border:1px solid rgba(34,112,148,.09);box-shadow:0 8px 18px rgba(30,91,121,.07);display:flex;align-items:center;gap:10px}.app-phone-mini i{width:11px;height:11px;border-radius:50%;background:#f58220;box-shadow:0 0 0 5px rgba(245,130,32,.1)}.app-phone-mini span{font-size:9px;line-height:1.3;font-weight:750;color:#45677b}
  .app-phone-nav{margin-top:auto;height:38px;border-radius:16px;background:#fff;display:flex;justify-content:space-around;align-items:center;box-shadow:0 8px 18px rgba(30,91,121,.08)}.app-phone-nav i{width:8px;height:8px;border-radius:50%;background:#c4d9e3}.app-phone-nav i.active{width:23px;border-radius:99px;background:#35aee5}
  .app-phone-customer .app-phone-hero-icon{background:#f58220}.app-phone-field .app-phone-hero-icon{background:#0d8fb9}.app-phone-collection .app-phone-hero-icon{background:#19a974}
}
@media (min-width:1081px) and (max-height:760px){
  .app-journey-sticky{padding-top:70px!important}.app-journey-intro{margin-bottom:0!important}.app-journey-intro h2{font-size:clamp(28px,3vw,41px)!important}
  .app-journey-panel{grid-template-columns:230px minmax(0,680px)!important;gap:52px!important;padding-top:8px!important;padding-bottom:18px!important}
  .app-phone-shell{width:220px;border-width:7px;border-radius:31px}.app-phone-screen{padding:32px 13px 14px;gap:10px}.app-phone-hero{padding:12px}.app-phone-mini{min-height:44px;padding:8px 10px}.app-phone-nav{height:31px}
  .app-journey-copy h3{font-size:clamp(33px,3.5vw,47px)!important;margin-bottom:11px!important}.app-journey-copy p{font-size:16px!important;line-height:1.55!important}.app-journey-copy ul{margin:15px 0 18px!important}.app-journey-copy .btn{min-height:43px!important}
}
@media (max-width:1080px){
  .app-phone{display:flex;justify-content:center;margin-bottom:22px}.app-phone-shell{position:relative;width:min(250px,68vw);aspect-ratio:9/18.6;border:8px solid #153b50;border-radius:34px;background:#fff;box-shadow:0 24px 48px rgba(20,73,99,.18);overflow:hidden}.app-phone-notch{position:absolute;z-index:5;left:50%;top:6px;transform:translateX(-50%);width:40%;height:20px;border-radius:0 0 14px 14px;background:#153b50}.app-phone-screen{position:absolute;inset:0;padding:36px 14px 16px;background:linear-gradient(180deg,#f6fcff,#eef9ff 54%,#fff);display:flex;flex-direction:column;gap:12px}.app-phone-top,.app-phone-hero,.app-phone-mini,.app-phone-nav{display:flex}.app-phone-top{justify-content:space-between}.app-phone-hero{padding:13px;border-radius:18px;background:linear-gradient(135deg,#dff6ff,#fff1e4);gap:10px}.app-phone-hero-icon{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;background:#35aee5;color:#fff}.app-phone-hero small{display:block;font-size:7px}.app-phone-hero strong{font-size:13px}.app-phone-cards{display:grid;gap:8px}.app-phone-mini{padding:9px;border-radius:14px;background:#fff;gap:8px}.app-phone-mini i{width:9px;height:9px;border-radius:50%;background:#f58220}.app-phone-mini span{font-size:8px}.app-phone-nav{margin-top:auto;justify-content:space-around;padding:10px;background:#fff;border-radius:14px}.app-phone-nav i{width:7px;height:7px;border-radius:50%;background:#c4d9e3}.app-phone-nav i.active{width:20px;border-radius:99px;background:#35aee5}
  .app-journey-panel{grid-template-columns:1fr!important;text-align:center!important}.app-journey-copy{text-align:center!important;margin-inline:auto!important}.app-journey-copy ul{justify-content:center!important}.app-journey-copy .section-kicker{justify-content:center!important}
}


/* ===== Sticky mobile app story: one phone, one app per wheel step ===== */
.sticky-app-story{
  --sticky-app-count:4;
  position:relative;
  height:430vh;
  min-height:3000px;
  background:
    radial-gradient(circle at 12% 22%,rgba(53,174,229,.13),transparent 30%),
    radial-gradient(circle at 88% 72%,rgba(245,130,32,.09),transparent 28%),
    linear-gradient(180deg,#eaf8ff 0%,#f6fcff 58%,#fff 100%);
  isolation:isolate;
}
.sticky-app-story__sticky{
  position:sticky;
  top:0;
  height:100vh;
  min-height:690px;
  padding:82px 0 24px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.sticky-app-story__header{
  position:relative;
  z-index:3;
  flex:0 0 auto;
  text-align:center;
  padding-inline:24px;
}
.sticky-app-story__header h2{
  max-width:880px;
  margin:9px auto 0;
  font-size:clamp(30px,3.2vw,48px);
  line-height:1.08;
  color:#102f46;
}
.sticky-app-story__stage{
  width:min(1180px,calc(100% - 72px));
  flex:1 1 auto;
  min-height:0;
  margin:10px auto 0;
  display:grid;
  grid-template-columns:minmax(280px,370px) minmax(0,690px);
  align-items:center;
  justify-content:center;
  gap:clamp(50px,7vw,112px);
}
.sticky-phone-wrap{display:grid;place-items:center;min-width:0}
.sticky-phone{
  position:relative;
  width:clamp(258px,22vw,326px);
  aspect-ratio:9/18.55;
  padding:8px;
  border-radius:54px;
  background:linear-gradient(145deg,#050607 0%,#3a3d41 14%,#090a0b 34%,#4f5358 55%,#070809 78%,#303337 100%);
  box-shadow:0 38px 76px rgba(13,58,82,.25),0 10px 28px rgba(13,58,82,.15),inset 0 0 0 1px rgba(255,255,255,.5);
  transform:translateZ(0);
}
.sticky-phone::before{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:50px;
  border:1px solid rgba(255,255,255,.34);
  pointer-events:none;
  z-index:8;
}
.sticky-phone__side{position:absolute;background:linear-gradient(90deg,#2f3337,#08090a,#44484d);border-radius:4px;z-index:-1}
.sticky-phone__side--left-one{left:-4px;top:116px;width:5px;height:52px}
.sticky-phone__side--left-two{left:-4px;top:181px;width:5px;height:80px}
.sticky-phone__side--right{right:-4px;top:172px;width:5px;height:90px}
.sticky-phone__screen{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius:46px;
  background:#f5fbff;
  box-shadow:inset 0 0 0 2px #050607;
}
.sticky-phone__island{
  position:absolute;
  z-index:20;
  left:50%;
  top:10px;
  transform:translateX(-50%);
  width:37%;
  height:25px;
  border-radius:999px;
  background:#050607;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  padding-right:10px;
  box-shadow:0 2px 5px rgba(0,0,0,.26);
}
.sticky-phone__island i{width:7px;height:7px;border-radius:50%;background:#101b22;box-shadow:inset 0 0 0 2px #172c38}
.sticky-phone__island b{width:5px;height:5px;border-radius:50%;background:#132b38}
.sticky-app-screen{
  position:absolute;
  inset:0;
  z-index:1;
  opacity:0;
  transform:translate3d(0,18px,0) scale(.985);
  visibility:hidden;
  transition:opacity .48s ease,transform .58s cubic-bezier(.2,.72,.2,1),visibility 0s linear .58s;
  will-change:opacity,transform;
}
.sticky-app-screen.is-active{
  z-index:3;
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  visibility:visible;
  transition-delay:0s;
}
.mobile-ui{
  height:100%;
  padding:14px 14px 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  color:#15394e;
  background:linear-gradient(180deg,#f9fdff 0%,#eaf7fd 62%,#f9fdff 100%);
  font-family:"Inter",sans-serif;
}
.mobile-ui--customer{background:linear-gradient(180deg,#fffaf4 0%,#fff 40%,#effaff 100%)}
.mobile-ui--field{background:linear-gradient(180deg,#f4fbff 0%,#eefaf6 100%)}
.mobile-ui--collection{background:linear-gradient(180deg,#f5fff9 0%,#f7fbff 100%)}
.mobile-ui__status{height:18px;padding:0 7px;display:flex;align-items:center;justify-content:space-between;font-size:7px;font-weight:900;color:#112d40}
.mobile-ui__topbar{display:flex;align-items:center;justify-content:space-between;padding:0 5px 2px}
.mobile-ui__topbar small{display:block;font-size:7px;line-height:1.2;color:#78909e;margin-bottom:2px}
.mobile-ui__topbar strong{display:block;font-size:14px;line-height:1.1;color:#15394e}
.mobile-ui__avatar{width:29px;height:29px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#35aee5,#168ebf);color:#fff;font-size:8px;font-weight:900;box-shadow:0 7px 16px rgba(53,174,229,.24)}
.mobile-ui__hero-card,.mobile-ui__balance-card,.mobile-ui__map-card,.mobile-ui__collection-summary{border-radius:20px;box-shadow:0 10px 25px rgba(34,103,135,.12)}
.mobile-ui__hero-card{padding:14px;background:linear-gradient(135deg,#ffffff,#ddf5ff);display:flex;align-items:center;justify-content:space-between}
.mobile-ui__hero-card small,.mobile-ui__balance-card small,.mobile-ui__collection-summary small{display:block;font-size:7px;color:#6d8796;margin-bottom:4px}
.mobile-ui__hero-card strong{display:block;font-size:25px;line-height:1;color:#107eae;margin-bottom:4px}
.mobile-ui__hero-card span{display:block;max-width:120px;font-size:7px;line-height:1.35;color:#587586}
.mobile-ui__ring{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#35aee5 0 72%,#d8edf6 72% 100%);position:relative}
.mobile-ui__ring::before{content:"";position:absolute;inset:7px;border-radius:50%;background:#fff}
.mobile-ui__ring b{position:relative;z-index:1;font-size:12px;color:#107eae}
.mobile-ui__section-title{display:flex;align-items:center;justify-content:space-between;padding:2px 3px 0}
.mobile-ui__section-title strong{font-size:9px;color:#234a60}
.mobile-ui__section-title span{font-size:7px;color:#35aee5;font-weight:800}
.mobile-ui__task{min-height:51px;padding:9px 10px;border-radius:15px;background:rgba(255,255,255,.88);display:flex;align-items:center;gap:9px;border:1px solid rgba(34,112,148,.08);box-shadow:0 7px 17px rgba(30,91,121,.06)}
.mobile-ui__task>i{width:27px;height:27px;border-radius:10px;display:grid;place-items:center;background:#eaf7fd;color:#35aee5;font-style:normal;font-size:11px;font-weight:900}
.mobile-ui__task>div{min-width:0;flex:1}.mobile-ui__task strong{display:block;font-size:8px;line-height:1.15}.mobile-ui__task small{display:block;margin-top:3px;font-size:6.5px;color:#8095a1}.mobile-ui__task>b{font-size:6px;color:#79909d}
.mobile-ui__task.is-active{border-color:rgba(53,174,229,.32)}.mobile-ui__task.is-active>b{color:#35aee5}.mobile-ui__task.is-done>i{background:#e9fbf2;color:#13a464}
.mobile-ui__bottom-nav{margin-top:auto;min-height:39px;padding:7px 13px;border-radius:15px;background:#fff;display:flex;align-items:center;justify-content:space-around;box-shadow:0 8px 20px rgba(28,89,118,.09)}
.mobile-ui__bottom-nav i{font-style:normal;font-size:11px;color:#b5c9d3}.mobile-ui__bottom-nav i.active{color:#35aee5}
.mobile-ui__balance-card{padding:15px;background:linear-gradient(135deg,#163e58,#1a708f);color:#fff}
.mobile-ui__balance-card>small{color:rgba(255,255,255,.7)}.mobile-ui__balance-card>strong{display:block;font-size:25px;line-height:1;margin-bottom:12px;color:#fff}
.mobile-ui__balance-card>div{display:flex;justify-content:space-between;align-items:center;font-size:7px;padding-top:10px;border-top:1px solid rgba(255,255,255,.15)}.mobile-ui__balance-card>div b{font-size:8px}
.mobile-ui__balance-card button,.mobile-ui__visit-card button{width:100%;margin-top:12px;border:0;border-radius:11px;padding:9px;background:#f58220;color:#fff;font-size:8px;font-weight:900}
.mobile-ui__progress-card{padding:12px;border-radius:16px;background:#fff;box-shadow:0 8px 20px rgba(31,88,115,.07)}
.mobile-ui__progress-card>div{display:flex;justify-content:space-between;font-size:7px;color:#355c70}.mobile-ui__progress-card>div b{color:#78909d}.mobile-ui__progress-card>i{display:block;height:7px;margin:9px 0 7px;border-radius:99px;background:#e6f0f4;overflow:hidden}.mobile-ui__progress-card>i b{display:block;width:43%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#35aee5,#f58220)}.mobile-ui__progress-card>small{font-size:6.5px;color:#75909e}
.mobile-ui__quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.mobile-ui__quick-grid>div{min-height:58px;padding:9px 4px;border-radius:14px;background:#fff;text-align:center;box-shadow:0 7px 17px rgba(31,88,115,.06)}.mobile-ui__quick-grid i{width:26px;height:26px;margin:0 auto 5px;border-radius:9px;display:grid;place-items:center;background:#e9f8ff;color:#178ebf;font-style:normal;font-size:10px}.mobile-ui__quick-grid span{display:block;font-size:6.5px;color:#45687a;font-weight:800}
.mobile-ui__map-card{position:relative;height:155px;overflow:hidden;background:linear-gradient(135deg,#d9eff4,#eef8ed)}
.mobile-ui__map-card::before,.mobile-ui__map-card::after{content:"";position:absolute;background:rgba(255,255,255,.9);transform:rotate(-18deg)}.mobile-ui__map-card::before{width:220px;height:12px;left:-25px;top:56px}.mobile-ui__map-card::after{width:180px;height:9px;left:64px;top:88px;transform:rotate(31deg)}
.mobile-ui__map-route{position:absolute;z-index:2;left:54px;top:35px;width:134px;height:74px;border:3px dashed #35aee5;border-left-color:transparent;border-bottom-color:#f58220;border-radius:50%;transform:rotate(-8deg)}
.mobile-ui__map-card .pin{position:absolute;z-index:4;width:23px;height:23px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);display:grid;place-items:center;background:#f58220;color:#fff;font-size:7px;font-style:normal;font-weight:900;box-shadow:0 6px 12px rgba(245,130,32,.25)}.mobile-ui__map-card .pin::after{content:attr(class);display:none}.mobile-ui__map-card .pin-one{left:47px;top:30px}.mobile-ui__map-card .pin-two{right:61px;top:66px;background:#35aee5}.mobile-ui__map-card .pin-three{left:103px;bottom:30px;background:#19a974}
.mobile-ui__map-card .pin{line-height:1}.mobile-ui__map-card .pin::first-letter{transform:rotate(45deg)}
.mobile-ui__map-card>div{position:absolute;z-index:5;left:10px;right:10px;bottom:9px;padding:9px 11px;border-radius:12px;background:rgba(255,255,255,.91);backdrop-filter:blur(6px)}.mobile-ui__map-card>div strong{display:block;font-size:8px}.mobile-ui__map-card>div small{display:block;margin-top:3px;font-size:6.5px;color:#6c8795}
.mobile-ui__visit-card{padding:12px;border-radius:17px;background:#fff;box-shadow:0 8px 20px rgba(31,88,115,.08)}.mobile-ui__visit-head{display:flex;align-items:center;gap:8px}.mobile-ui__visit-head>span{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:#e8f7ff;color:#168ebf;font-size:8px;font-weight:900}.mobile-ui__visit-head>div{flex:1}.mobile-ui__visit-head strong{display:block;font-size:8px}.mobile-ui__visit-head small{display:block;margin-top:3px;font-size:6px;color:#7b929e}.mobile-ui__visit-head>b{font-size:6.5px;color:#19a974}.mobile-ui__visit-meta{display:flex;gap:6px;margin-top:10px}.mobile-ui__visit-meta span{padding:5px 7px;border-radius:99px;background:#f0f7fa;font-size:6px;color:#5d7a89}
.mobile-ui__collection-summary{padding:14px;background:linear-gradient(135deg,#126e61,#20a97a);color:#fff;display:flex;align-items:center;justify-content:space-between}.mobile-ui__collection-summary small{color:rgba(255,255,255,.7)}.mobile-ui__collection-summary strong{display:block;font-size:23px;color:#fff;line-height:1;margin-bottom:5px}.mobile-ui__collection-summary span{font-size:7px;color:rgba(255,255,255,.78)}
.mobile-ui__donut{width:62px;height:62px;border-radius:50%;background:conic-gradient(#ffd7a8 0 78%,rgba(255,255,255,.22) 78%);display:grid;place-items:center;position:relative}.mobile-ui__donut::before{content:"";position:absolute;inset:8px;border-radius:50%;background:#16826c}.mobile-ui__donut b{position:relative;z-index:1;color:#fff;font-size:11px}
.mobile-ui__metric-row{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.mobile-ui__metric-row>div{padding:10px 5px;border-radius:13px;background:#fff;text-align:center;box-shadow:0 7px 17px rgba(31,88,115,.06)}.mobile-ui__metric-row small{display:block;font-size:6px;color:#8297a2}.mobile-ui__metric-row strong{display:block;margin-top:3px;font-size:13px;color:#19445a}
.mobile-ui__account{min-height:54px;padding:9px;border-radius:15px;background:#fff;display:flex;align-items:center;gap:8px;box-shadow:0 7px 17px rgba(31,88,115,.06)}.mobile-ui__account>span{width:29px;height:29px;border-radius:10px;display:grid;place-items:center;background:#e9faf2;color:#159c6d;font-size:7px;font-weight:900}.mobile-ui__account>div{min-width:0;flex:1}.mobile-ui__account strong{display:block;font-size:7.5px}.mobile-ui__account small{display:block;margin-top:3px;font-size:6px;color:#7f949f}.mobile-ui__account button{border:0;border-radius:9px;padding:7px 8px;background:#eaf8ff;color:#168ebf;font-size:6px;font-weight:900}
.sticky-app-copy{position:relative;width:100%;min-height:460px;display:grid;place-items:center}
.sticky-app-copy__item{
  position:absolute;
  inset:0;
  margin:auto;
  width:100%;
  max-width:680px;
  min-height:390px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  opacity:0;
  visibility:hidden;
  transform:translate3d(0,22px,0);
  transition:opacity .42s ease,transform .54s cubic-bezier(.2,.72,.2,1),visibility 0s linear .54s;
  pointer-events:none;
}
.sticky-app-copy__item.is-active{opacity:1;visibility:visible;transform:translate3d(0,0,0);transition-delay:0s;pointer-events:auto}
.sticky-app-copy__item .section-kicker{display:inline-flex;justify-content:center}
.sticky-app-copy__item h3{max-width:680px;margin:11px auto 17px;font-size:clamp(38px,4.2vw,60px);line-height:1.03;color:#103751}
.sticky-app-copy__item p{max-width:650px;margin:0 auto;font-size:clamp(16.5px,1.25vw,19px);line-height:1.72;color:#506f81}
.sticky-app-copy__item ul{display:flex;flex-wrap:wrap;justify-content:center;gap:11px 22px;margin:24px 0 28px;padding:0;list-style:none}
.sticky-app-copy__item li{position:relative;padding-left:17px;font-size:14.5px;line-height:1.45;color:#315d73;font-weight:750;text-align:left}
.sticky-app-copy__item li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:#f58220}
.sticky-app-copy__item .btn{min-width:112px;justify-content:center}
.sticky-app-story__steps{position:absolute;z-index:6;left:50%;bottom:20px;transform:translateX(-50%);display:flex;gap:10px;padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.75);box-shadow:0 8px 24px rgba(24,87,116,.1);backdrop-filter:blur(10px)}
.sticky-app-story__steps button{width:28px;height:18px;padding:0;border:0;background:transparent;display:grid;place-items:center;cursor:pointer}
.sticky-app-story__steps button span{display:block;width:8px;height:8px;border-radius:50%;background:#bdd4de;transition:width .25s ease,background .25s ease}
.sticky-app-story__steps button.is-active span{width:23px;border-radius:99px;background:linear-gradient(90deg,#35aee5,#f58220)}

@media (min-width:1081px) and (max-height:780px){
  .sticky-app-story__sticky{padding-top:68px;min-height:620px}
  .sticky-app-story__header h2{font-size:clamp(27px,2.7vw,40px)}
  .sticky-app-story__stage{margin-top:2px;grid-template-columns:250px minmax(0,620px);gap:60px}
  .sticky-phone{width:218px;border-radius:42px;padding:6px}
  .sticky-phone__screen{border-radius:36px}
  .sticky-phone__island{top:8px;height:20px}
  .mobile-ui{padding:10px 10px 9px;gap:7px}
  .mobile-ui__status{height:14px}.mobile-ui__topbar strong{font-size:11px}.mobile-ui__avatar{width:24px;height:24px}
  .mobile-ui__hero-card,.mobile-ui__balance-card,.mobile-ui__collection-summary{padding:10px;border-radius:15px}.mobile-ui__hero-card strong,.mobile-ui__balance-card>strong,.mobile-ui__collection-summary strong{font-size:20px}.mobile-ui__ring,.mobile-ui__donut{width:48px;height:48px}
  .mobile-ui__task{min-height:40px;padding:7px}.mobile-ui__task>i{width:23px;height:23px}.mobile-ui__map-card{height:120px}.mobile-ui__quick-grid>div{min-height:48px;padding:7px 3px}.mobile-ui__bottom-nav{min-height:31px;padding:5px 10px}
  .sticky-app-copy{min-height:370px}.sticky-app-copy__item{min-height:330px}.sticky-app-copy__item h3{font-size:clamp(32px,3.5vw,48px);margin-bottom:12px}.sticky-app-copy__item p{font-size:15.5px;line-height:1.58}.sticky-app-copy__item ul{margin:17px 0 20px}
}
@media (max-width:1080px){
  .sticky-app-story{height:auto;min-height:0;padding:96px 0 72px}
  .sticky-app-story__sticky{position:relative;height:auto;min-height:0;padding:0;overflow:visible}
  .sticky-app-story__stage{width:min(100% - 40px,760px);grid-template-columns:1fr;gap:34px;margin-top:38px}
  .sticky-phone{width:min(292px,72vw)}
  .sticky-app-copy{min-height:430px}
  .sticky-app-story__steps{position:relative;left:auto;bottom:auto;transform:none;width:max-content;margin:24px auto 0}
}
@media (max-width:620px){
  .sticky-app-story{padding-top:82px}
  .sticky-app-story__header{padding-inline:18px}.sticky-app-story__header h2{font-size:31px}
  .sticky-app-story__stage{width:min(100% - 28px,520px);gap:24px;margin-top:28px}
  .sticky-phone{width:min(258px,70vw);border-radius:46px}.sticky-phone__screen{border-radius:39px}
  .sticky-app-copy{min-height:450px}.sticky-app-copy__item{min-height:420px}
  .sticky-app-copy__item h3{font-size:36px}.sticky-app-copy__item p{font-size:16px;line-height:1.65}.sticky-app-copy__item ul{display:grid;gap:10px;margin:20px 0 24px}
}
@media (prefers-reduced-motion:reduce){
  .sticky-app-screen,.sticky-app-copy__item{transition:none!important}
}

/* ===== App story refinement: fitted phone + horizontal app transitions ===== */
@media (min-width:1081px){
  .sticky-app-story{
    height:400vh;
    min-height:2800px;
  }
  .sticky-app-story__sticky{
    height:100svh;
    min-height:650px;
    padding:clamp(90px,11vh,112px) 0 16px;
    display:grid;
    grid-template-rows:auto minmax(0,1fr) auto;
    overflow:hidden;
  }
  .sticky-app-story__header{
    align-self:start;
  }
  .sticky-app-story__header h2{
    max-width:920px;
    margin-top:7px;
    font-size:clamp(29px,2.7vw,43px);
  }
  .sticky-app-story__stage{
    width:min(1240px,calc(100% - 80px));
    height:100%;
    min-height:0;
    margin:0 auto;
    grid-template-columns:minmax(260px,360px) minmax(0,720px);
    gap:clamp(56px,7vw,118px);
    align-items:center;
  }
  .sticky-phone-wrap{
    height:100%;
    min-height:0;
    align-items:center;
  }
  .sticky-phone{
    width:auto;
    height:min(58vh,570px);
    max-height:calc(100svh - 235px);
    min-height:420px;
    aspect-ratio:9/18.55;
    border-radius:clamp(40px,4.2vh,54px);
  }
  .sticky-phone::before{border-radius:calc(clamp(40px,4.2vh,54px) - 4px)}
  .sticky-phone__screen{border-radius:calc(clamp(40px,4.2vh,54px) - 8px)}
  .sticky-app-copy{
    min-height:0;
    height:min(52vh,460px);
    overflow:hidden;
  }
  .sticky-app-screen,
  .sticky-app-copy__item{
    visibility:visible;
    opacity:1;
    transition-property:transform;
    transition-duration:.68s;
    transition-timing-function:cubic-bezier(.22,1.08,.34,1);
    transition-delay:0s;
    will-change:transform;
  }
  .sticky-app-screen{
    transform:translate3d(calc((var(--app-index) - var(--active-app,0)) * 104%),0,0) scale(.992);
    pointer-events:none;
  }
  .sticky-app-screen.is-active{
    transform:translate3d(calc((var(--app-index) - var(--active-app,0)) * 104%),0,0) scale(1);
    pointer-events:auto;
  }
  .sticky-app-copy__item{
    transform:translate3d(calc((var(--app-index) - var(--active-app,0)) * 104%),0,0);
    pointer-events:none;
  }
  .sticky-app-copy__item.is-active{
    transform:translate3d(calc((var(--app-index) - var(--active-app,0)) * 104%),0,0);
    pointer-events:auto;
  }
  .sticky-app-copy__item h3{
    font-size:clamp(36px,3.7vw,54px);
    margin:10px auto 15px;
  }
  .sticky-app-copy__item p{
    max-width:680px;
    font-size:clamp(16px,1.15vw,18.5px);
    line-height:1.65;
  }
  .sticky-app-copy__item ul{margin:20px 0 24px}
  .sticky-app-story__steps{
    position:relative;
    left:auto;
    bottom:auto;
    transform:none;
    justify-self:center;
    margin:2px auto 0;
  }
}

@media (min-width:1081px) and (max-height:760px){
  .sticky-app-story__sticky{
    min-height:610px;
    padding-top:76px;
    padding-bottom:10px;
  }
  .sticky-app-story__header .eyebrow{font-size:12px}
  .sticky-app-story__header h2{font-size:clamp(26px,2.35vw,36px);line-height:1.05}
  .sticky-app-story__stage{
    grid-template-columns:230px minmax(0,650px);
    gap:52px;
  }
  .sticky-phone{
    height:min(55vh,470px);
    max-height:calc(100svh - 205px);
    min-height:360px;
    padding:6px;
  }
  .sticky-app-copy{height:min(48vh,370px)}
  .sticky-app-copy__item{min-height:0}
  .sticky-app-copy__item h3{font-size:clamp(30px,3vw,43px);margin:8px auto 11px}
  .sticky-app-copy__item p{font-size:15.5px;line-height:1.55}
  .sticky-app-copy__item ul{margin:14px 0 17px;gap:8px 18px}
  .sticky-app-copy__item li{font-size:13.5px}
  .sticky-app-copy__item .btn{min-height:42px}
}

@media (prefers-reduced-motion:reduce){
  .sticky-app-screen,.sticky-app-copy__item{transition:none!important}
}

/* =========================================================================
   STICKY APP STORY — layered content reveal inside phone screens
   ========================================================================= */
@keyframes mobileLayerIn{
  0%{
    opacity:0;
    transform:translate3d(0,18px,0) scale(.985);
    filter:blur(2px);
  }
  68%{
    opacity:1;
    transform:translate3d(0,-2px,0) scale(1.003);
    filter:blur(0);
  }
  100%{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
    filter:blur(0);
  }
}

.mobile-ui{
  position:relative;
  isolation:isolate;
}
.mobile-ui > *{
  will-change:transform,opacity,filter;
}

@media (prefers-reduced-motion:no-preference){
  .sticky-app-screen .mobile-ui > *{
    opacity:0;
    transform:translate3d(0,18px,0) scale(.985);
    filter:blur(2px);
  }
  .sticky-app-screen.is-active .mobile-ui > *{
    animation:mobileLayerIn .56s cubic-bezier(.22,.88,.22,1.05) forwards;
  }
  .sticky-app-screen.is-active .mobile-ui > *:nth-child(1){animation-delay:.03s}
  .sticky-app-screen.is-active .mobile-ui > *:nth-child(2){animation-delay:.09s}
  .sticky-app-screen.is-active .mobile-ui > *:nth-child(3){animation-delay:.15s}
  .sticky-app-screen.is-active .mobile-ui > *:nth-child(4){animation-delay:.22s}
  .sticky-app-screen.is-active .mobile-ui > *:nth-child(5){animation-delay:.29s}
  .sticky-app-screen.is-active .mobile-ui > *:nth-child(6){animation-delay:.36s}
  .sticky-app-screen.is-active .mobile-ui > *:nth-child(7){animation-delay:.43s}
  .sticky-app-screen.is-active .mobile-ui > *:nth-child(8){animation-delay:.50s}
  .sticky-app-screen.is-active .mobile-ui > *:nth-child(9){animation-delay:.57s}
}

@media (prefers-reduced-motion:reduce){
  .sticky-app-screen .mobile-ui > *{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    animation:none!important;
  }
}

/* =========================================================================
   STICKY APP STORY — premium glass depth inside mobile screens
   ========================================================================= */
.sticky-phone__screen{
  background:
    radial-gradient(circle at 20% 8%,rgba(255,255,255,.82),transparent 28%),
    linear-gradient(180deg,rgba(245,252,255,.98),rgba(232,247,253,.96));
}

.sticky-phone__screen::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:18;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(118deg,rgba(255,255,255,.34) 0 12%,transparent 25% 74%,rgba(255,255,255,.12) 88% 100%),
    radial-gradient(circle at 82% 16%,rgba(255,255,255,.22),transparent 26%);
  mix-blend-mode:screen;
  opacity:.72;
}

.sticky-phone__screen::after{
  content:"";
  position:absolute;
  z-index:19;
  pointer-events:none;
  top:-18%;
  left:-48%;
  width:44%;
  height:138%;
  transform:rotate(16deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
  filter:blur(2px);
  opacity:.52;
  animation:phoneGlassSweep 6.8s ease-in-out infinite;
}

@keyframes phoneGlassSweep{
  0%,18%{translate:0 0;opacity:0}
  32%{opacity:.48}
  58%{translate:360% 0;opacity:.24}
  72%,100%{translate:360% 0;opacity:0}
}

.mobile-ui{
  background:
    radial-gradient(circle at 18% 5%,rgba(255,255,255,.78),transparent 24%),
    linear-gradient(180deg,rgba(249,253,255,.9),rgba(234,247,253,.86));
}
.mobile-ui--customer{
  background:
    radial-gradient(circle at 18% 4%,rgba(255,255,255,.84),transparent 24%),
    linear-gradient(180deg,rgba(255,250,244,.91),rgba(239,250,255,.87));
}
.mobile-ui--field{
  background:
    radial-gradient(circle at 18% 5%,rgba(255,255,255,.82),transparent 24%),
    linear-gradient(180deg,rgba(244,251,255,.91),rgba(238,250,246,.86));
}
.mobile-ui--collection{
  background:
    radial-gradient(circle at 18% 5%,rgba(255,255,255,.82),transparent 24%),
    linear-gradient(180deg,rgba(245,255,249,.91),rgba(247,251,255,.86));
}

.mobile-ui__hero-card,
.mobile-ui__balance-card,
.mobile-ui__map-card,
.mobile-ui__collection-summary,
.mobile-ui__task,
.mobile-ui__progress-card,
.mobile-ui__quick-grid > div,
.mobile-ui__visit-card,
.mobile-ui__metric-row > div,
.mobile-ui__account,
.mobile-ui__bottom-nav{
  border:1px solid rgba(255,255,255,.58);
  box-shadow:
    0 12px 28px rgba(20,79,108,.1),
    inset 0 1px 0 rgba(255,255,255,.76),
    inset 0 -1px 0 rgba(68,137,170,.05);
  backdrop-filter:blur(13px) saturate(1.12);
  -webkit-backdrop-filter:blur(13px) saturate(1.12);
}

.mobile-ui__task,
.mobile-ui__progress-card,
.mobile-ui__quick-grid > div,
.mobile-ui__visit-card,
.mobile-ui__metric-row > div,
.mobile-ui__account,
.mobile-ui__bottom-nav{
  background:linear-gradient(145deg,rgba(255,255,255,.84),rgba(255,255,255,.64));
}

.mobile-ui__hero-card{
  background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(218,244,255,.68));
}
.mobile-ui__balance-card{
  background:linear-gradient(145deg,rgba(21,61,87,.96),rgba(25,112,144,.88));
}
.mobile-ui__map-card{
  background:linear-gradient(145deg,rgba(217,239,244,.82),rgba(238,248,237,.72));
}
.mobile-ui__collection-summary{
  background:linear-gradient(145deg,rgba(18,110,97,.96),rgba(32,169,122,.86));
}

.mobile-ui__task,
.mobile-ui__progress-card,
.mobile-ui__quick-grid > div,
.mobile-ui__visit-card,
.mobile-ui__metric-row > div,
.mobile-ui__account{
  transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s ease,border-color .32s ease;
}

.sticky-app-screen.is-active .mobile-ui__task:hover,
.sticky-app-screen.is-active .mobile-ui__progress-card:hover,
.sticky-app-screen.is-active .mobile-ui__quick-grid > div:hover,
.sticky-app-screen.is-active .mobile-ui__visit-card:hover,
.sticky-app-screen.is-active .mobile-ui__metric-row > div:hover,
.sticky-app-screen.is-active .mobile-ui__account:hover{
  transform:translateY(-2px);
  border-color:rgba(53,174,229,.25);
  box-shadow:
    0 16px 34px rgba(20,79,108,.14),
    inset 0 1px 0 rgba(255,255,255,.84);
}

.mobile-ui__avatar,
.mobile-ui__ring,
.mobile-ui__donut,
.mobile-ui__task > i,
.mobile-ui__quick-grid i,
.mobile-ui__visit-head > span,
.mobile-ui__account > span{
  box-shadow:
    0 8px 18px rgba(24,93,124,.14),
    inset 0 1px 0 rgba(255,255,255,.66);
}

@media (max-width:1080px){
  .sticky-phone__screen::after{animation-duration:8.5s;opacity:.38}
}

@media (prefers-reduced-motion:reduce){
  .sticky-phone__screen::after{display:none}
}

/* =========================================================================
   FINAL APP STORY POLISH — stable copy transition + balanced phone sizing
   ========================================================================= */
@media (min-width:1081px){
  /* Homepage phone: approximately 8% larger while remaining inside viewport. */
  .sticky-app-story__stage{
    grid-template-columns:minmax(285px,390px) minmax(0,740px);
    gap:clamp(58px,7vw,112px);
  }
  .sticky-phone{
    height:min(62.5vh,616px);
    max-height:calc(100svh - 205px);
    min-height:450px;
  }

  /* Keep the text area stable and prevent neighbouring slides from appearing. */
  .sticky-app-copy{
    width:min(100%,740px);
    height:min(56vh,500px);
    min-height:420px;
    padding:18px 26px 32px;
    margin-inline:auto;
    overflow:clip;
    contain:layout paint;
    transform:translateZ(0);
  }
  .sticky-app-copy__item{
    inset:18px 26px 32px;
    width:auto;
    max-width:688px;
    min-height:0;
    opacity:0;
    visibility:hidden;
    transform:translate3d(calc((var(--app-index) - var(--active-app,0)) * 112%),0,0);
    transition:
      transform .62s cubic-bezier(.22,.82,.28,1),
      opacity .24s ease,
      visibility 0s linear .62s;
    backface-visibility:hidden;
    -webkit-font-smoothing:antialiased;
  }
  .sticky-app-copy__item.is-active{
    opacity:1;
    visibility:visible;
    transform:translate3d(0,0,0);
    transition-delay:0s;
  }
  .sticky-app-copy__item .btn{
    margin-bottom:8px;
  }
}

@media (min-width:1081px) and (max-height:760px){
  .sticky-app-story__stage{
    grid-template-columns:250px minmax(0,680px);
    gap:56px;
  }
  .sticky-phone{
    height:min(59vh,505px);
    max-height:calc(100svh - 178px);
    min-height:390px;
  }
  .sticky-app-copy{
    height:min(51vh,395px);
    min-height:350px;
    padding:12px 22px 24px;
  }
  .sticky-app-copy__item{inset:12px 22px 24px}
}

/* App detail pages: reduce both hero and supporting phone mockups by 15%. */
.app-page-phone .app-phone,
.app-choice-phone .app-phone{
  zoom:.85;
}

@supports not (zoom:.85){
  .app-page-phone .app-phone,
  .app-choice-phone .app-phone{
    transform:scale(.85) rotate(-2deg);
    transform-origin:center;
  }
}

@media (max-width:760px){
  .app-page-phone .app-phone,
  .app-choice-phone .app-phone{
    transform:rotate(-2deg);
  }
  @supports not (zoom:.85){
    .app-page-phone .app-phone,
    .app-choice-phone .app-phone{
      transform:scale(.85) rotate(-2deg);
    }
  }
}


/* =========================================================================
   Request update: hold last home slider + inner pages use same styled mobile
   ========================================================================= */
@media (min-width:1081px){
  .sticky-app-story{
    height:500vh !important;
    min-height:3400px !important;
  }
  .sticky-app-copy{
    position:relative;
    contain:layout style paint;
    will-change:transform;
  }
  .sticky-app-copy__item{
    will-change:transform, opacity;
  }
  /* Subtle layered intro on the home page sticky phone */
  .sticky-app-story.is-loaded .sticky-app-screen.is-active .mobile-ui > *{
    opacity:0;
    transform:translate3d(0,24px,0) scale(.985);
    animation:innerPhoneLayerIn .72s cubic-bezier(.18,.78,.22,1) forwards;
  }
  .sticky-app-story.is-loaded .sticky-app-screen.is-active .mobile-ui > *:nth-child(1){animation-delay:.03s}
  .sticky-app-story.is-loaded .sticky-app-screen.is-active .mobile-ui > *:nth-child(2){animation-delay:.08s}
  .sticky-app-story.is-loaded .sticky-app-screen.is-active .mobile-ui > *:nth-child(3){animation-delay:.14s}
  .sticky-app-story.is-loaded .sticky-app-screen.is-active .mobile-ui > *:nth-child(4){animation-delay:.20s}
  .sticky-app-story.is-loaded .sticky-app-screen.is-active .mobile-ui > *:nth-child(5){animation-delay:.26s}
  .sticky-app-story.is-loaded .sticky-app-screen.is-active .mobile-ui > *:nth-child(6){animation-delay:.32s}
  .sticky-app-story.is-loaded .sticky-app-screen.is-active .mobile-ui > *:nth-child(7){animation-delay:.38s}
  .sticky-app-story.is-loaded .sticky-app-screen.is-active .mobile-ui > *:nth-child(8){animation-delay:.44s}
}

/* Inner app pages: match the homepage mobile feeling, add a slight rotate,
   and animate each layer once the block reveals. */
.app-page-phone,
.app-choice-phone{
  perspective:1400px;
}

.app-page-phone .app-phone,
.app-choice-phone .app-phone{
  position:relative;
  overflow:visible;
  zoom:.85;
  transform:rotate(-5deg);
  transform-origin:center center;
  border:none !important;
  border-radius:46px !important;
  padding:8px !important;
  background:linear-gradient(145deg,#050607 0%,#3a3d41 14%,#090a0b 34%,#4f5358 55%,#070809 78%,#303337 100%) !important;
  box-shadow:0 36px 70px rgba(13,58,82,.22),0 10px 26px rgba(13,58,82,.14),inset 0 0 0 1px rgba(255,255,255,.45) !important;
}

.app-page-phone .app-phone::before,
.app-choice-phone .app-phone::before{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:42px;
  border:1px solid rgba(255,255,255,.28);
  pointer-events:none;
  z-index:4;
}

.app-page-phone .app-phone::after,
.app-choice-phone .app-phone::after{
  content:"";
  position:absolute;
  left:50%;
  top:10px;
  transform:translateX(-50%);
  width:37%;
  height:24px;
  border-radius:999px;
  background:#050607;
  box-shadow:0 2px 5px rgba(0,0,0,.26);
  z-index:6;
}

.app-page-phone .phone-top,
.app-choice-phone .phone-top{
  position:relative;
  z-index:7;
  height:28px;
  padding:0 12px 6px;
  color:#dcecf5;
  align-items:center;
}
.app-page-phone .phone-top span,
.app-choice-phone .phone-top span{width:0 !important;height:0 !important;background:transparent !important}
.app-page-phone .phone-top b,
.app-page-phone .phone-top i,
.app-choice-phone .phone-top b,
.app-choice-phone .phone-top i{color:#dcecf5 !important}

.app-page-phone .phone-screen,
.app-choice-phone .phone-screen{
  position:relative;
  height:370px;
  border-radius:38px !important;
  padding:12px 14px 14px !important;
  background:linear-gradient(180deg,rgba(244,252,255,.99),rgba(225,244,252,.96)) !important;
  box-shadow:inset 0 0 0 2px #050607,inset 0 1px 0 rgba(255,255,255,.9),0 0 28px rgba(53,174,229,.08) !important;
  overflow:hidden;
  isolation:isolate;
}

.app-page-phone .phone-screen::before,
.app-choice-phone .phone-screen::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(118deg,rgba(255,255,255,.38) 0 12%,transparent 25% 74%,rgba(255,255,255,.14) 88% 100%),
    radial-gradient(circle at 82% 14%,rgba(255,255,255,.26),transparent 26%);
  opacity:.76;
  pointer-events:none;
  z-index:0;
}

.app-page-phone .phone-screen > *,
.app-choice-phone .phone-screen > *{position:relative;z-index:1}

.app-page-phone .phone-row,
.app-choice-phone .phone-row,
.app-page-phone .phone-chart,
.app-choice-phone .phone-chart,
.app-page-phone .phone-hero-icon,
.app-choice-phone .phone-hero-icon{
  border:1px solid rgba(255,255,255,.72) !important;
  box-shadow:0 12px 26px rgba(22,82,111,.12),inset 0 1px 0 rgba(255,255,255,.92),inset 0 -1px 0 rgba(44,126,164,.06) !important;
}

.app-page-phone .phone-row,
.app-choice-phone .phone-row,
.app-page-phone .phone-chart,
.app-choice-phone .phone-chart{
  background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(255,255,255,.68)) !important;
  backdrop-filter:blur(14px) saturate(1.18);
  -webkit-backdrop-filter:blur(14px) saturate(1.18);
}

.app-page-phone .phone-hero-icon,
.app-choice-phone .phone-hero-icon{
  background:linear-gradient(145deg,#e5f6ff,#fff2e7) !important;
}

.app-page-phone.visible .app-phone,
.app-choice-phone.visible .app-phone{
  animation:innerPhoneIntro .8s cubic-bezier(.18,.78,.22,1) both;
}

.app-page-phone.visible .phone-screen > *,
.app-choice-phone.visible .phone-screen > *{
  opacity:0;
  transform:translate3d(0,18px,0) scale(.985);
  animation:innerPhoneLayerIn .72s cubic-bezier(.18,.78,.22,1) forwards;
}
.app-page-phone.visible .phone-screen > *:nth-child(1),
.app-choice-phone.visible .phone-screen > *:nth-child(1){animation-delay:.04s}
.app-page-phone.visible .phone-screen > *:nth-child(2),
.app-choice-phone.visible .phone-screen > *:nth-child(2){animation-delay:.10s}
.app-page-phone.visible .phone-screen > *:nth-child(3),
.app-choice-phone.visible .phone-screen > *:nth-child(3){animation-delay:.17s}
.app-page-phone.visible .phone-screen > *:nth-child(4),
.app-choice-phone.visible .phone-screen > *:nth-child(4){animation-delay:.24s}
.app-page-phone.visible .phone-screen > *:nth-child(5),
.app-choice-phone.visible .phone-screen > *:nth-child(5){animation-delay:.31s}
.app-page-phone.visible .phone-screen > *:nth-child(6),
.app-choice-phone.visible .phone-screen > *:nth-child(6){animation-delay:.38s}

@media (max-width:760px){
  .app-page-phone .app-phone,
  .app-choice-phone .app-phone{
    zoom:1;
    transform:scale(.85) rotate(-4deg);
  }
}

@keyframes innerPhoneLayerIn{
  0%{opacity:0;transform:translate3d(0,18px,0) scale(.985)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1)}
}

@keyframes innerPhoneIntro{
  0%{opacity:0;transform:translate3d(-8px,24px,0) rotate(-7deg) scale(.965)}
  100%{opacity:1;transform:translate3d(0,0,0) rotate(-5deg) scale(1)}
}

@media (prefers-reduced-motion:reduce){
  .app-page-phone.visible .app-phone,
  .app-choice-phone.visible .app-phone,
  .app-page-phone.visible .phone-screen > *,
  .app-choice-phone.visible .phone-screen > *,
  .sticky-app-story.is-loaded .sticky-app-screen.is-active .mobile-ui > *{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}


/* =========================================================================
   FINAL FIX — sharp layered phones + stable sticky scroll
   ========================================================================= */

/* Keep the phone content crisp: layered motion without blur. */
@keyframes mobileLayerInSharp{
  0%{opacity:0;transform:translate3d(0,16px,0) scale(.988)}
  72%{opacity:1;transform:translate3d(0,-1px,0) scale(1.002)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1)}
}

.sticky-app-screen .mobile-ui > *,
.app-page-phone .phone-screen > *,
.app-choice-phone .phone-screen > *{
  filter:none !important;
  backface-visibility:hidden;
  -webkit-font-smoothing:antialiased;
  transform:translateZ(0);
}

@media (prefers-reduced-motion:no-preference){
  .sticky-app-screen .mobile-ui > *{
    opacity:0;
    transform:translate3d(0,16px,0) scale(.988);
    filter:none !important;
  }
  .sticky-app-screen.is-active .mobile-ui > *{
    animation:mobileLayerInSharp .58s cubic-bezier(.22,.88,.22,1.04) forwards !important;
  }
}

/* Remove fuzzy glass blur while keeping premium depth. */
.mobile-ui__hero-card,
.mobile-ui__balance-card,
.mobile-ui__map-card,
.mobile-ui__collection-summary,
.mobile-ui__task,
.mobile-ui__progress-card,
.mobile-ui__quick-grid > div,
.mobile-ui__visit-card,
.mobile-ui__metric-row > div,
.mobile-ui__account,
.mobile-ui__bottom-nav,
.app-page-phone .phone-row,
.app-choice-phone .phone-row,
.app-page-phone .phone-chart,
.app-choice-phone .phone-chart,
.app-page-phone .phone-hero-icon,
.app-choice-phone .phone-hero-icon{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* Home page phone: keep scale stable and content sharp. */
.sticky-phone,
.sticky-phone__screen,
.sticky-app-screen,
.mobile-ui{
  transform-style:flat;
  image-rendering:auto;
}

/* Inner pages: use the same portrait mobile feeling as the home page. */
.app-page-phone,
.app-choice-phone{
  perspective:1400px;
}

.app-page-phone .app-phone,
.app-choice-phone .app-phone{
  position:relative;
  width:262px;
  height:540px;
  aspect-ratio:auto;
  padding:8px;
  border:none !important;
  border-radius:54px !important;
  background:linear-gradient(145deg,#050607 0%,#3a3d41 14%,#090a0b 34%,#4f5358 55%,#070809 78%,#303337 100%) !important;
  box-shadow:0 38px 76px rgba(13,58,82,.24),0 10px 28px rgba(13,58,82,.14),inset 0 0 0 1px rgba(255,255,255,.48) !important;
  overflow:visible;
  transform:rotate(-5deg) translateZ(0) !important;
  isolation:isolate;
}

.app-page-phone .app-phone::before,
.app-choice-phone .app-phone::before{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:50px;
  border:1px solid rgba(255,255,255,.34);
  pointer-events:none;
  z-index:8;
}

.app-page-phone .app-phone::after,
.app-choice-phone .app-phone::after{
  content:"";
  position:absolute;
  z-index:20;
  left:50%;
  top:10px;
  transform:translateX(-50%);
  width:37%;
  height:25px;
  border-radius:999px;
  background:#050607;
  box-shadow:0 2px 5px rgba(0,0,0,.26);
}

.app-page-phone .phone-top,
.app-choice-phone .phone-top{
  position:relative;
  z-index:12;
  height:20px;
  padding:0 12px 0;
  margin-top:30px;
  color:#dcecf5;
  font-size:8px;
}
.app-page-phone .phone-top span,
.app-choice-phone .phone-top span{
  width:0 !important;
  height:0 !important;
  background:transparent !important;
}
.app-page-phone .phone-top b,
.app-page-phone .phone-top i,
.app-choice-phone .phone-top b,
.app-choice-phone .phone-top i{color:#dcecf5 !important}

.app-page-phone .phone-screen,
.app-choice-phone .phone-screen{
  position:relative;
  z-index:2;
  width:100%;
  height:454px;
  border-radius:40px !important;
  padding:16px 16px 14px !important;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 5%,rgba(255,255,255,.78),transparent 24%),
    linear-gradient(180deg,rgba(249,253,255,.98),rgba(234,247,253,.96)) !important;
  box-shadow:inset 0 0 0 2px #050607, inset 0 1px 0 rgba(255,255,255,.9), 0 0 24px rgba(53,174,229,.06) !important;
}

.app-page-phone .phone-screen::before,
.app-choice-phone .phone-screen::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(118deg,rgba(255,255,255,.28) 0 12%,transparent 25% 74%,rgba(255,255,255,.1) 88% 100%),
    radial-gradient(circle at 82% 16%,rgba(255,255,255,.18),transparent 26%);
  opacity:.78;
}

.app-page-phone .phone-screen > *,
.app-choice-phone .phone-screen > *{position:relative;z-index:1}

.app-page-phone .phone-row,
.app-choice-phone .phone-row,
.app-page-phone .phone-chart,
.app-choice-phone .phone-chart,
.app-page-phone .phone-hero-icon,
.app-choice-phone .phone-hero-icon{
  border:1px solid rgba(255,255,255,.74) !important;
  background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(255,255,255,.82)) !important;
  box-shadow:0 12px 26px rgba(22,82,111,.1), inset 0 1px 0 rgba(255,255,255,.96), inset 0 -1px 0 rgba(44,126,164,.05) !important;
}

.app-page-phone .phone-home,
.app-choice-phone .phone-home{
  width:52px;
  height:5px;
  border-radius:99px;
  background:#45677a;
  margin:9px auto 0;
}

@keyframes innerPhoneEnterSharp{
  0%{opacity:0;transform:translate3d(-8px,20px,0) rotate(-7deg) scale(.97)}
  100%{opacity:1;transform:translate3d(0,0,0) rotate(-5deg) scale(1)}
}
@keyframes innerPhoneLayerSharp{
  0%{opacity:0;transform:translate3d(0,16px,0) scale(.988)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1)}
}

.app-page-phone.visible .app-phone,
.app-choice-phone.visible .app-phone{
  animation:innerPhoneEnterSharp .72s cubic-bezier(.2,.82,.25,1) both;
}

.app-page-phone.visible .phone-screen > *,
.app-choice-phone.visible .phone-screen > *{
  opacity:0;
  transform:translate3d(0,16px,0) scale(.988);
  animation:innerPhoneLayerSharp .58s cubic-bezier(.22,.88,.22,1.04) forwards;
}
.app-page-phone.visible .phone-screen > *:nth-child(1),
.app-choice-phone.visible .phone-screen > *:nth-child(1){animation-delay:.05s}
.app-page-phone.visible .phone-screen > *:nth-child(2),
.app-choice-phone.visible .phone-screen > *:nth-child(2){animation-delay:.12s}
.app-page-phone.visible .phone-screen > *:nth-child(3),
.app-choice-phone.visible .phone-screen > *:nth-child(3){animation-delay:.19s}
.app-page-phone.visible .phone-screen > *:nth-child(4),
.app-choice-phone.visible .phone-screen > *:nth-child(4){animation-delay:.26s}
.app-page-phone.visible .phone-screen > *:nth-child(5),
.app-choice-phone.visible .phone-screen > *:nth-child(5){animation-delay:.33s}
.app-page-phone.visible .phone-screen > *:nth-child(6),
.app-choice-phone.visible .phone-screen > *:nth-child(6){animation-delay:.40s}

@media (max-width:1080px){
  .app-page-phone .app-phone,
  .app-choice-phone .app-phone{
    width:242px;
    height:500px;
  }
  .app-page-phone .phone-screen,
  .app-choice-phone .phone-screen{height:418px}
}

@media (max-width:760px){
  .app-page-phone .app-phone,
  .app-choice-phone .app-phone{
    transform:scale(.9) rotate(-4deg) !important;
    transform-origin:center center;
  }
}

@media (prefers-reduced-motion:reduce){
  .app-page-phone.visible .app-phone,
  .app-choice-phone.visible .app-phone,
  .app-page-phone.visible .phone-screen > *,
  .app-choice-phone.visible .phone-screen > *,
  .sticky-app-screen.is-active .mobile-ui > *{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}


/* =========================================================================
   FINAL POLISH — smoother sticky exit + stronger layer-wise mobile UI
   ========================================================================= */

.sticky-app-story.is-loaded .sticky-app-screen .mobile-ui > *{
  opacity:0;
  transform:translate3d(0,18px,0) scale(.984);
  will-change:transform,opacity;
}

.sticky-app-story.is-loaded .sticky-app-screen.is-active .mobile-ui > *{
  animation:mobileLayerInSharp .66s cubic-bezier(.22,.88,.22,1.04) forwards !important;
}
.sticky-app-story.is-loaded .sticky-app-screen.is-active .mobile-ui > *:nth-child(1){animation-delay:.02s !important}
.sticky-app-story.is-loaded .sticky-app-screen.is-active .mobile-ui > *:nth-child(2){animation-delay:.09s !important}
.sticky-app-story.is-loaded .sticky-app-screen.is-active .mobile-ui > *:nth-child(3){animation-delay:.17s !important}
.sticky-app-story.is-loaded .sticky-app-screen.is-active .mobile-ui > *:nth-child(4){animation-delay:.25s !important}
.sticky-app-story.is-loaded .sticky-app-screen.is-active .mobile-ui > *:nth-child(5){animation-delay:.33s !important}
.sticky-app-story.is-loaded .sticky-app-screen.is-active .mobile-ui > *:nth-child(6){animation-delay:.41s !important}
.sticky-app-story.is-loaded .sticky-app-screen.is-active .mobile-ui > *:nth-child(7){animation-delay:.49s !important}
.sticky-app-story.is-loaded .sticky-app-screen.is-active .mobile-ui > *:nth-child(8){animation-delay:.57s !important}
.sticky-app-story.is-loaded .sticky-app-screen.is-active .mobile-ui > *:nth-child(9){animation-delay:.65s !important}

@keyframes subLayerRise{
  0%{opacity:0;transform:translate3d(0,10px,0) scale(.985)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1)}
}

.sticky-app-screen.is-active .mobile-ui__quick-grid > div,
.sticky-app-screen.is-active .mobile-ui__metric-row > div,
.sticky-app-screen.is-active .mobile-ui__visit-meta span,
.sticky-app-screen.is-active .mobile-ui__visit-head,
.sticky-app-screen.is-active .mobile-ui__account,
.app-page-phone.visible .phone-list .phone-row,
.app-choice-phone.visible .phone-list .phone-row,
.app-page-phone.visible .phone-chart i,
.app-choice-phone.visible .phone-chart i{
  opacity:0;
  animation:subLayerRise .52s cubic-bezier(.22,.88,.22,1.04) forwards;
}

.sticky-app-screen.is-active .mobile-ui__quick-grid > div:nth-child(1),
.sticky-app-screen.is-active .mobile-ui__metric-row > div:nth-child(1),
.app-page-phone.visible .phone-list .phone-row:nth-child(1),
.app-choice-phone.visible .phone-list .phone-row:nth-child(1),
.app-page-phone.visible .phone-chart i:nth-child(1),
.app-choice-phone.visible .phone-chart i:nth-child(1){animation-delay:.22s}
.sticky-app-screen.is-active .mobile-ui__quick-grid > div:nth-child(2),
.sticky-app-screen.is-active .mobile-ui__metric-row > div:nth-child(2),
.app-page-phone.visible .phone-list .phone-row:nth-child(2),
.app-choice-phone.visible .phone-list .phone-row:nth-child(2),
.app-page-phone.visible .phone-chart i:nth-child(2),
.app-choice-phone.visible .phone-chart i:nth-child(2){animation-delay:.29s}
.sticky-app-screen.is-active .mobile-ui__quick-grid > div:nth-child(3),
.sticky-app-screen.is-active .mobile-ui__metric-row > div:nth-child(3),
.app-page-phone.visible .phone-list .phone-row:nth-child(3),
.app-choice-phone.visible .phone-list .phone-row:nth-child(3),
.app-page-phone.visible .phone-chart i:nth-child(3),
.app-choice-phone.visible .phone-chart i:nth-child(3){animation-delay:.36s}
.app-page-phone.visible .phone-chart i:nth-child(4),
.app-choice-phone.visible .phone-chart i:nth-child(4){animation-delay:.43s}
.app-page-phone.visible .phone-chart i:nth-child(5),
.app-choice-phone.visible .phone-chart i:nth-child(5){animation-delay:.50s}

.app-page-phone,
.app-choice-phone{
  position:relative;
  display:grid;
  place-items:center;
}

.app-page-phone::before,
.app-choice-phone::before,
.app-page-phone::after,
.app-choice-phone::after{
  content:"";
  position:absolute;
  border-radius:6px;
  background:linear-gradient(90deg,#2f3337,#090a0b,#454a50);
  box-shadow:0 2px 6px rgba(0,0,0,.18);
  z-index:0;
}

.app-page-phone::before,
.app-choice-phone::before{
  left:calc(50% - 145px);
  top:118px;
  width:5px;
  height:56px;
  box-shadow:0 74px 0 0 rgba(22,25,27,.95);
}

.app-page-phone::after,
.app-choice-phone::after{
  right:calc(50% - 145px);
  top:154px;
  width:5px;
  height:86px;
}

.app-page-phone .app-phone,
.app-choice-phone .app-phone{
  width:278px;
  height:576px;
  border-radius:58px !important;
  padding:8px !important;
  background:linear-gradient(145deg,#030404 0%,#373a3e 12%,#050607 31%,#50545a 56%,#050607 79%,#31353a 100%) !important;
  box-shadow:0 42px 80px rgba(12,52,74,.24),0 14px 32px rgba(12,52,74,.16),inset 0 0 0 1px rgba(255,255,255,.5) !important;
}

.app-page-phone .app-phone::before,
.app-choice-phone .app-phone::before{inset:4px;border-radius:54px}
.app-page-phone .app-phone::after,
.app-choice-phone .app-phone::after{top:11px;height:26px;z-index:22}

.app-page-phone .phone-top,
.app-choice-phone .phone-top{
  margin-top:31px;
  padding:0 14px;
  font-size:8px;
  letter-spacing:.02em;
}

.app-page-phone .phone-screen,
.app-choice-phone .phone-screen{
  height:486px;
  border-radius:43px !important;
  padding:18px 16px 15px !important;
  background:
    radial-gradient(circle at 18% 5%,rgba(255,255,255,.8),transparent 24%),
    linear-gradient(180deg,rgba(249,253,255,.985),rgba(232,247,252,.965)) !important;
  box-shadow:inset 0 0 0 2px #050607, inset 0 1px 0 rgba(255,255,255,.92), 0 0 24px rgba(53,174,229,.08) !important;
}

.app-page-phone .phone-screen::after,
.app-choice-phone .phone-screen::after{
  content:"";
  position:absolute;
  inset:-8% -35% auto auto;
  width:58%;
  height:148%;
  transform:rotate(24deg) translateX(0);
  background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,0) 45%,rgba(255,255,255,.14) 100%);
  opacity:.52;
  pointer-events:none;
  animation:phoneGlassSweep 7.8s ease-in-out infinite;
}

@keyframes phoneGlassSweep{
  0%,100%{transform:rotate(24deg) translateX(12%)}
  50%{transform:rotate(24deg) translateX(-24%)}
}

.app-page-phone .phone-greeting,
.app-choice-phone .phone-greeting{margin-bottom:10px}
.app-page-phone .phone-greeting h4,
.app-choice-phone .phone-greeting h4{font-size:19px;line-height:1.15}

.app-page-phone .phone-hero-icon,
.app-choice-phone .phone-hero-icon{
  width:58px;
  height:58px;
  border-radius:20px;
  margin-bottom:14px;
}

.app-page-phone .phone-list,
.app-choice-phone .phone-list{gap:10px}
.app-page-phone .phone-row,
.app-choice-phone .phone-row{
  min-height:42px;
  padding:10px 12px;
  border-radius:14px;
  font-size:10px;
}

.app-page-phone .phone-chart,
.app-choice-phone .phone-chart{
  height:64px;
  margin-top:14px;
  gap:7px;
  padding:9px;
  border-radius:16px;
}

.app-page-phone .phone-home,
.app-choice-phone .phone-home{margin-top:11px}

@media (max-width:1180px){
  .app-page-phone::before,
  .app-choice-phone::before{left:calc(50% - 134px)}
  .app-page-phone::after,
  .app-choice-phone::after{right:calc(50% - 134px)}
  .app-page-phone .app-phone,
  .app-choice-phone .app-phone{width:258px;height:536px}
  .app-page-phone .phone-screen,
  .app-choice-phone .phone-screen{height:446px}
}

@media (max-width:760px){
  .app-page-phone::before,
  .app-choice-phone::before{left:calc(50% - 123px)}
  .app-page-phone::after,
  .app-choice-phone::after{right:calc(50% - 123px)}
  .app-page-phone .app-phone,
  .app-choice-phone .app-phone{
    width:238px;
    height:496px;
    transform:scale(1) rotate(-4deg) !important;
  }
  .app-page-phone .phone-screen,
  .app-choice-phone .phone-screen{height:410px;padding:16px 14px 14px !important}
  .app-page-phone .phone-greeting h4,
  .app-choice-phone .phone-greeting h4{font-size:17px}
}

@media (prefers-reduced-motion:reduce){
  .app-page-phone .phone-screen::after,
  .app-choice-phone .phone-screen::after{animation:none !important}
}


/* =========================================================================
   INNER APP PAGES — straight phone and better content fit
   ========================================================================= */
.app-page-phone .app-phone,
.app-choice-phone .app-phone{
  transform:rotate(0deg) translateZ(0) !important;
  width:264px !important;
  height:548px !important;
}

.app-page-phone .app-phone::before,
.app-choice-phone .app-phone::before{
  inset:4px !important;
  border-radius:54px !important;
}

.app-page-phone .app-phone::after,
.app-choice-phone .app-phone::after{
  top:11px !important;
  width:118px !important;
  height:26px !important;
}

.app-page-phone .phone-screen,
.app-choice-phone .phone-screen{
  height:460px !important;
  padding:20px 16px 15px !important;
}

.app-page-phone .phone-greeting,
.app-choice-phone .phone-greeting{
  margin-bottom:12px !important;
}

.app-page-phone .phone-greeting h4,
.app-choice-phone .phone-greeting h4{
  font-size:21px !important;
  line-height:1.14 !important;
  letter-spacing:-.02em;
}

.app-page-phone .phone-greeting small,
.app-choice-phone .phone-greeting small{
  font-size:12px !important;
}

.app-page-phone .phone-hero-icon,
.app-choice-phone .phone-hero-icon{
  width:62px !important;
  height:62px !important;
  border-radius:20px !important;
  margin-bottom:16px !important;
}

.app-page-phone .phone-list,
.app-choice-phone .phone-list{
  gap:11px !important;
}

.app-page-phone .phone-row,
.app-choice-phone .phone-row{
  min-height:46px !important;
  padding:11px 13px !important;
  border-radius:15px !important;
  font-size:11px !important;
}

.app-page-phone .phone-row strong,
.app-choice-phone .phone-row strong{
  font-size:14px !important;
}

.app-page-phone .phone-chart,
.app-choice-phone .phone-chart{
  height:70px !important;
  margin-top:15px !important;
  gap:8px !important;
  padding:10px !important;
  border-radius:18px !important;
}

.app-page-phone .phone-home,
.app-choice-phone .phone-home{
  margin-top:12px !important;
}

@media (max-width:1180px){
  .app-page-phone .app-phone,
  .app-choice-phone .app-phone{
    width:248px !important;
    height:516px !important;
  }
  .app-page-phone .phone-screen,
  .app-choice-phone .phone-screen{height:432px !important}
  .app-page-phone .phone-greeting h4,
  .app-choice-phone .phone-greeting h4{font-size:19px !important}
}

@media (max-width:760px){
  .app-page-phone .app-phone,
  .app-choice-phone .app-phone{
    width:232px !important;
    height:482px !important;
    transform:rotate(0deg) translateZ(0) !important;
  }
  .app-page-phone .phone-screen,
  .app-choice-phone .phone-screen{
    height:398px !important;
    padding:17px 14px 14px !important;
  }
  .app-page-phone .phone-greeting h4,
  .app-choice-phone .phone-greeting h4{font-size:17px !important}
}


/* ======================================================================
   MOBILE APP INNER PAGES — relevant layered phone content (only app pages)
   ====================================================================== */
.mobile-layered-phone .layered-screen{
  position:relative;
  overflow:hidden;
  gap:10px;
}
.mobile-layered-phone .layered-screen.screen-onboarding{--accent:#1a96d4;--accent-2:#f58220;--soft:#eef8ff;--soft-2:#fff4eb}
.mobile-layered-phone .layered-screen.screen-collection{--accent:#2eae9b;--accent-2:#f5a049;--soft:#ecfbf8;--soft-2:#fff5ea}
.mobile-layered-phone .layered-screen.screen-customer{--accent:#3b95e8;--accent-2:#6b7cff;--soft:#edf6ff;--soft-2:#f4f5ff}
.mobile-layered-phone .layered-screen.screen-verification{--accent:#1ca78f;--accent-2:#4aa3ff;--soft:#edfdf9;--soft-2:#edf6ff}

.mobile-layered-phone .phone-hero-card{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 12px;
  border-radius:18px;
  background:linear-gradient(135deg,var(--soft),var(--soft-2));
  border:1px solid rgba(34,112,148,.12);
  box-shadow:0 10px 22px rgba(21,62,87,.08), inset 0 1px 0 rgba(255,255,255,.75);
  position:relative;
}
.mobile-layered-phone .phone-hero-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,.36),transparent 55%);
  pointer-events:none;
}
.mobile-layered-phone .phone-hero-card .phone-hero-icon{
  margin:0;
  width:50px;
  height:50px;
  border-radius:16px;
  background:linear-gradient(145deg,#fff,rgba(255,255,255,.75));
  box-shadow:0 10px 18px rgba(21,62,87,.07);
  flex:none;
}
.mobile-layered-phone .phone-hero-copy{display:flex;flex-direction:column;min-width:0}
.mobile-layered-phone .phone-hero-copy span{
  font-size:10px;
  font-weight:800;
  color:var(--accent-2);
  line-height:1.1;
}
.mobile-layered-phone .phone-hero-copy strong{
  font-size:13px;
  line-height:1.15;
  color:#153e57;
  margin-top:2px;
}
.mobile-layered-phone .phone-hero-copy em{
  font-style:normal;
  font-size:9px;
  line-height:1.35;
  color:#628091;
  margin-top:4px;
}
.mobile-layered-phone .phone-list{gap:9px; margin-top:2px}
.mobile-layered-phone .phone-row{
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  min-height:46px;
  padding:10px 11px;
  border-radius:14px;
  background:rgba(255,255,255,.95);
  box-shadow:0 8px 18px rgba(25,69,94,.06);
}
.mobile-layered-phone .phone-row span{
  font-size:10px;
  font-weight:700;
  color:#5f7a8a;
}
.mobile-layered-phone .phone-row strong{
  font-size:11px;
  font-weight:800;
  color:#154662;
}
.mobile-layered-phone .phone-row .row-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  padding:5px 7px;
  border-radius:999px;
  background:linear-gradient(135deg,rgba(26,150,212,.12),rgba(245,130,32,.16));
  color:#14506d;
  font-size:8px;
  font-weight:800;
  line-height:1;
  letter-spacing:.02em;
  border:1px solid rgba(21,80,109,.08);
}
.mobile-layered-phone .phone-chart{
  position:relative;
  margin-top:12px;
  height:66px;
  border-radius:16px;
  background:linear-gradient(180deg,#edf8ff,#ffffff);
  border:1px solid rgba(34,112,148,.09);
  box-shadow:0 8px 18px rgba(27,78,106,.05);
}
.mobile-layered-phone .phone-chart::before{
  content:"Activity trend";
  position:absolute;
  top:8px; left:9px;
  font-size:8px;
  font-weight:800;
  color:#6a8593;
  letter-spacing:.03em;
}
.mobile-layered-phone .phone-chart i{
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
  box-shadow:0 6px 10px rgba(26,150,212,.15);
}
.mobile-layered-phone .phone-float-note{
  position:absolute;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:74px;
  padding:8px 10px;
  border-radius:14px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 14px 24px rgba(17,59,81,.10);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.mobile-layered-phone .phone-float-note span{
  font-size:8px;
  font-weight:800;
  color:#7690a0;
  line-height:1;
}
.mobile-layered-phone .phone-float-note strong{
  font-size:9px;
  font-weight:800;
  color:#173f57;
  line-height:1.2;
}
.mobile-layered-phone .phone-float-note-a{right:6px; top:98px}
.mobile-layered-phone .phone-float-note-b{left:8px; bottom:86px}
.mobile-layered-phone .screen-customer .phone-float-note-a{top:105px}
.mobile-layered-phone .screen-verification .phone-float-note-a{top:102px}
.mobile-layered-phone .screen-collection .phone-float-note-b{bottom:88px}
.mobile-layered-phone .screen-onboarding .phone-float-note-b{bottom:88px}
.mobile-layered-phone .phone-home{margin-top:10px}

.mobile-layered-phone.visible .phone-hero-card,
.mobile-layered-phone.visible .phone-float-note,
.mobile-layered-phone.visible .phone-row,
.mobile-layered-phone.visible .phone-chart{
  opacity:0;
  animation:mobileLayerIn .55s cubic-bezier(.2,.8,.2,1) forwards;
}
.mobile-layered-phone.visible .phone-hero-card{animation-delay:.08s}
.mobile-layered-phone.visible .phone-float-note-a{animation-delay:.16s}
.mobile-layered-phone.visible .phone-list .phone-row:nth-child(1){animation-delay:.22s !important}
.mobile-layered-phone.visible .phone-list .phone-row:nth-child(2){animation-delay:.30s !important}
.mobile-layered-phone.visible .phone-list .phone-row:nth-child(3){animation-delay:.38s !important}
.mobile-layered-phone.visible .phone-chart{animation-delay:.46s}
.mobile-layered-phone.visible .phone-float-note-b{animation-delay:.56s}
.mobile-layered-phone.visible .phone-float-note{
  animation-name:mobileLayerIn, mobileLayerDrift;
  animation-duration:.55s, 4.6s;
  animation-delay:inherit, .9s;
  animation-timing-function:cubic-bezier(.2,.8,.2,1), ease-in-out;
  animation-fill-mode:forwards, both;
  animation-iteration-count:1, infinite;
}
.mobile-layered-phone.visible .phone-hero-card{
  animation-name:mobileLayerIn, mobileLayerGlow;
  animation-duration:.55s, 5.2s;
  animation-delay:.08s, .95s;
  animation-timing-function:cubic-bezier(.2,.8,.2,1), ease-in-out;
  animation-fill-mode:forwards, both;
  animation-iteration-count:1, infinite;
}
@keyframes mobileLayerIn{
  from{opacity:0;transform:translateY(16px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes mobileLayerDrift{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}
@keyframes mobileLayerGlow{
  0%,100%{box-shadow:0 10px 22px rgba(21,62,87,.08), inset 0 1px 0 rgba(255,255,255,.75)}
  50%{box-shadow:0 16px 26px rgba(21,62,87,.11), inset 0 1px 0 rgba(255,255,255,.9)}
}

@media (max-width:760px){
  .mobile-layered-phone .phone-float-note-a{right:4px; top:92px}
  .mobile-layered-phone .phone-float-note-b{left:6px; bottom:78px}
  .mobile-layered-phone .phone-float-note{min-width:68px;padding:7px 9px}
}

@media (prefers-reduced-motion:reduce){
  .mobile-layered-phone.visible .phone-hero-card,
  .mobile-layered-phone.visible .phone-float-note,
  .mobile-layered-phone.visible .phone-row,
  .mobile-layered-phone.visible .phone-chart{animation:none !important;opacity:1 !important;transform:none !important}
}


/* ======================================================================
   PREMIUM DEPTH ENHANCEMENT — inner mobile app pages only
   ====================================================================== */
.mobile-layered-phone .layered-screen{
  background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(248,252,255,.95));
  border:1px solid rgba(255,255,255,.85);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(17,59,81,.03),
    0 18px 34px rgba(21,62,87,.08);
}
.mobile-layered-phone .layered-screen::before,
.mobile-layered-phone .layered-screen::after{
  content:"";
  position:absolute;
  border-radius:999px;
  pointer-events:none;
  z-index:0;
  filter:blur(4px);
}
.mobile-layered-phone .layered-screen::before{
  width:120px;
  height:120px;
  right:-26px;
  top:-18px;
  background:radial-gradient(circle at center,rgba(255,255,255,.95),rgba(255,255,255,0) 68%);
}
.mobile-layered-phone .layered-screen::after{
  width:110px;
  height:110px;
  left:-28px;
  bottom:34px;
  background:radial-gradient(circle at center,rgba(26,150,212,.12),rgba(255,255,255,0) 72%);
}
.mobile-layered-phone .phone-greeting,
.mobile-layered-phone .phone-hero-card,
.mobile-layered-phone .phone-list,
.mobile-layered-phone .phone-chart,
.mobile-layered-phone .phone-float-note,
.mobile-layered-phone .phone-home{position:relative;z-index:1}

.mobile-layered-phone .phone-hero-card{
  box-shadow:
    0 18px 30px rgba(21,62,87,.11),
    0 8px 16px rgba(26,150,212,.08),
    inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transform:translateZ(0);
}
.mobile-layered-phone .phone-hero-card::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  border:1px solid rgba(255,255,255,.55);
  pointer-events:none;
}
.mobile-layered-phone .phone-hero-card .phone-hero-icon{
  position:relative;
  box-shadow:
    0 14px 26px rgba(21,62,87,.12),
    inset 0 1px 0 rgba(255,255,255,.9);
}
.mobile-layered-phone .phone-hero-card .phone-hero-icon::before{
  content:"";
  position:absolute;
  inset:6px;
  border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0));
}
.mobile-layered-phone .phone-row{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,251,255,.96));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:
    0 16px 26px rgba(25,69,94,.08),
    0 6px 12px rgba(26,150,212,.04),
    inset 0 1px 0 rgba(255,255,255,.92);
}
.mobile-layered-phone .phone-row::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,.38),transparent 55%);
  pointer-events:none;
}
.mobile-layered-phone .phone-list .phone-row:nth-child(1){z-index:4; transform:translateX(0)}
.mobile-layered-phone .phone-list .phone-row:nth-child(2){z-index:3; transform:translateX(6px)}
.mobile-layered-phone .phone-list .phone-row:nth-child(3){z-index:2; transform:translateX(12px)}
.mobile-layered-phone .phone-row .row-pill{
  box-shadow:0 8px 14px rgba(21,80,109,.08), inset 0 1px 0 rgba(255,255,255,.45);
}
.mobile-layered-phone .phone-chart{
  overflow:hidden;
  box-shadow:
    0 16px 26px rgba(27,78,106,.08),
    inset 0 1px 0 rgba(255,255,255,.9);
}
.mobile-layered-phone .phone-chart::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(255,255,255,.38),transparent 40%),
    radial-gradient(circle at 80% 15%,rgba(26,150,212,.12),transparent 26%);
  pointer-events:none;
}
.mobile-layered-phone .phone-chart i{
  border-radius:10px 10px 4px 4px;
  position:relative;
}
.mobile-layered-phone .phone-chart i::after{
  content:"";
  position:absolute;
  left:18%; right:18%; top:8%; height:18%;
  border-radius:999px;
  background:rgba(255,255,255,.35);
}
.mobile-layered-phone .phone-float-note{
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.74));
  box-shadow:
    0 18px 32px rgba(17,59,81,.14),
    0 8px 18px rgba(26,150,212,.06),
    inset 0 1px 0 rgba(255,255,255,.95);
}
.mobile-layered-phone .phone-float-note::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  border:1px solid rgba(255,255,255,.5);
  pointer-events:none;
}
.mobile-layered-phone .phone-float-note-a{transform:translate3d(4px,-2px,0)}
.mobile-layered-phone .phone-float-note-b{transform:translate3d(-3px,0,0)}
.mobile-layered-phone .phone-home{
  position:relative;
  width:78px;
  height:5px;
  border-radius:999px;
  margin-inline:auto;
  background:linear-gradient(90deg,rgba(16,52,75,.12),rgba(16,52,75,.28),rgba(16,52,75,.12));
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}

.mobile-layered-phone.visible .phone-list .phone-row{
  animation-name:mobileLayerIn, mobileRowFloat;
  animation-duration:.55s, 6s;
  animation-timing-function:cubic-bezier(.2,.8,.2,1), ease-in-out;
  animation-fill-mode:forwards, both;
  animation-iteration-count:1, infinite;
}
.mobile-layered-phone.visible .phone-list .phone-row:nth-child(1){animation-delay:.22s, 1.1s !important}
.mobile-layered-phone.visible .phone-list .phone-row:nth-child(2){animation-delay:.30s, 1.35s !important}
.mobile-layered-phone.visible .phone-list .phone-row:nth-child(3){animation-delay:.38s, 1.6s !important}
.mobile-layered-phone.visible .phone-chart{
  animation-name:mobileLayerIn, mobileChartPulse;
  animation-duration:.55s, 5.6s;
  animation-delay:.46s, 1.2s;
  animation-timing-function:cubic-bezier(.2,.8,.2,1), ease-in-out;
  animation-fill-mode:forwards, both;
  animation-iteration-count:1, infinite;
}

@keyframes mobileRowFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}
@keyframes mobileChartPulse{
  0%,100%{box-shadow:0 16px 26px rgba(27,78,106,.08), inset 0 1px 0 rgba(255,255,255,.9)}
  50%{box-shadow:0 20px 32px rgba(27,78,106,.12), 0 8px 18px rgba(26,150,212,.08), inset 0 1px 0 rgba(255,255,255,.98)}
}

@media (prefers-reduced-motion:reduce){
  .mobile-layered-phone.visible .phone-list .phone-row,
  .mobile-layered-phone.visible .phone-chart{animation:none !important;opacity:1 !important;transform:none !important}
}


/* ======================================================================
   ULTRA-PREMIUM APPLE-LIKE DEPTH — inner mobile app pages only
   ====================================================================== */
.app-page-phone.mobile-layered-phone,
.app-choice-phone.mobile-layered-phone{
  perspective:1800px;
}

.app-page-phone.mobile-layered-phone .app-phone,
.app-choice-phone.mobile-layered-phone .app-phone{
  transform-style:preserve-3d;
  background:linear-gradient(145deg,#050607 0%,#2e3135 14%,#090a0b 36%,#4a4f55 54%,#060708 74%,#2b2f33 100%) !important;
  box-shadow:
    0 56px 100px rgba(11,45,64,.22),
    0 24px 42px rgba(11,45,64,.16),
    0 8px 18px rgba(0,0,0,.14),
    inset 0 0 0 1px rgba(255,255,255,.52),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -2px 6px rgba(0,0,0,.3) !important;
}

.app-page-phone.mobile-layered-phone .app-phone::before,
.app-choice-phone.mobile-layered-phone .app-phone::before{
  inset:3px;
  border-radius:51px;
  border:1px solid rgba(255,255,255,.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 -1px 0 rgba(0,0,0,.18);
}

.app-page-phone.mobile-layered-phone .app-phone::after,
.app-choice-phone.mobile-layered-phone .app-phone::after{
  box-shadow:0 2px 5px rgba(0,0,0,.28), inset 0 -1px 0 rgba(255,255,255,.04);
}

.app-page-phone.mobile-layered-phone .app-phone .phone-screen,
.app-choice-phone.mobile-layered-phone .app-phone .phone-screen{
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  background:
    radial-gradient(circle at 16% 0%,rgba(255,255,255,.92),transparent 23%),
    radial-gradient(circle at 88% 18%,rgba(118,206,255,.12),transparent 24%),
    linear-gradient(180deg,rgba(252,254,255,.98),rgba(240,248,253,.97) 48%,rgba(232,244,250,.98) 100%) !important;
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,.72),
    inset 0 0 0 2.5px rgba(6,7,8,.86),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -18px 30px rgba(90,154,189,.05),
    0 10px 28px rgba(31,104,140,.08) !important;
}

.app-page-phone.mobile-layered-phone .phone-screen::before,
.app-choice-phone.mobile-layered-phone .phone-screen::before{
  background:
    linear-gradient(116deg,rgba(255,255,255,.48) 0 11%,transparent 20% 63%,rgba(255,255,255,.16) 79% 100%),
    radial-gradient(circle at 86% 12%,rgba(255,255,255,.36),transparent 26%),
    radial-gradient(circle at 16% 88%,rgba(109,195,243,.10),transparent 24%);
  opacity:.96;
}

.app-page-phone.mobile-layered-phone .layered-screen,
.app-choice-phone.mobile-layered-phone .layered-screen{
  border:1px solid rgba(255,255,255,.94);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(13,58,82,.03),
    0 26px 42px rgba(19,66,92,.11),
    0 8px 18px rgba(56,145,188,.06);
}

.app-page-phone.mobile-layered-phone .layered-screen::before,
.app-choice-phone.mobile-layered-phone .layered-screen::before{
  width:136px;
  height:136px;
  right:-30px;
  top:-22px;
  filter:blur(8px);
}
.app-page-phone.mobile-layered-phone .layered-screen::after,
.app-choice-phone.mobile-layered-phone .layered-screen::after{
  width:124px;
  height:124px;
  left:-30px;
  bottom:30px;
  filter:blur(8px);
}

.app-page-phone.mobile-layered-phone .phone-hero-card,
.app-choice-phone.mobile-layered-phone .phone-hero-card{
  background:linear-gradient(155deg,rgba(255,255,255,.96),rgba(249,252,255,.88) 44%,rgba(240,248,255,.86));
  border:1px solid rgba(255,255,255,.92);
  box-shadow:
    0 24px 40px rgba(16,63,88,.14),
    0 10px 18px rgba(56,145,188,.08),
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(15,80,111,.03);
}
.app-page-phone.mobile-layered-phone .phone-hero-card::after,
.app-choice-phone.mobile-layered-phone .phone-hero-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,.42),transparent 48%,rgba(118,206,255,.06) 100%);
  pointer-events:none;
}

.app-page-phone.mobile-layered-phone .phone-hero-card .phone-hero-icon,
.app-choice-phone.mobile-layered-phone .phone-hero-card .phone-hero-icon{
  box-shadow:
    0 18px 28px rgba(14,71,100,.16),
    0 8px 14px rgba(56,145,188,.08),
    inset 0 1px 0 rgba(255,255,255,.95);
}

.app-page-phone.mobile-layered-phone .phone-row,
.app-choice-phone.mobile-layered-phone .phone-row{
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.96) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(247,251,255,.96)) !important;
  box-shadow:
    0 18px 32px rgba(18,66,90,.09),
    0 8px 14px rgba(56,145,188,.05),
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(16,74,102,.03) !important;
}
.app-page-phone.mobile-layered-phone .phone-row:nth-child(1),
.app-choice-phone.mobile-layered-phone .phone-row:nth-child(1){transform:translate3d(0,0,18px)}
.app-page-phone.mobile-layered-phone .phone-row:nth-child(2),
.app-choice-phone.mobile-layered-phone .phone-row:nth-child(2){transform:translate3d(8px,0,10px)}
.app-page-phone.mobile-layered-phone .phone-row:nth-child(3),
.app-choice-phone.mobile-layered-phone .phone-row:nth-child(3){transform:translate3d(14px,0,4px)}

.app-page-phone.mobile-layered-phone .phone-row .row-pill,
.app-choice-phone.mobile-layered-phone .phone-row .row-pill{
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(248,251,255,.86));
  border:1px solid rgba(255,255,255,.82);
  box-shadow:
    0 10px 18px rgba(16,74,102,.08),
    inset 0 1px 0 rgba(255,255,255,.95);
}

.app-page-phone.mobile-layered-phone .phone-chart,
.app-choice-phone.mobile-layered-phone .phone-chart{
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(246,251,255,.92)) !important;
  border:1px solid rgba(255,255,255,.96) !important;
  box-shadow:
    0 20px 34px rgba(18,66,90,.10),
    0 9px 18px rgba(56,145,188,.05),
    inset 0 1px 0 rgba(255,255,255,.98) !important;
}
.app-page-phone.mobile-layered-phone .phone-chart::after,
.app-choice-phone.mobile-layered-phone .phone-chart::after{
  background:
    linear-gradient(180deg,rgba(255,255,255,.46),transparent 42%),
    radial-gradient(circle at 82% 16%,rgba(118,206,255,.14),transparent 24%),
    radial-gradient(circle at 18% 78%,rgba(245,130,32,.06),transparent 16%);
}
.app-page-phone.mobile-layered-phone .phone-chart i,
.app-choice-phone.mobile-layered-phone .phone-chart i{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 8px 12px rgba(33,122,166,.08);
}

.app-page-phone.mobile-layered-phone .phone-float-note,
.app-choice-phone.mobile-layered-phone .phone-float-note{
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.85);
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.78));
  box-shadow:
    0 24px 40px rgba(15,58,81,.18),
    0 10px 18px rgba(56,145,188,.06),
    inset 0 1px 0 rgba(255,255,255,.98);
}

.app-page-phone.mobile-layered-phone .phone-home,
.app-choice-phone.mobile-layered-phone .phone-home{
  width:62px;
  height:5px;
  background:linear-gradient(90deg,rgba(68,104,122,.12),rgba(68,104,122,.42),rgba(68,104,122,.12));
  box-shadow:0 3px 10px rgba(0,0,0,.08);
}

.app-page-phone.mobile-layered-phone.visible .phone-screen > *,
.app-choice-phone.mobile-layered-phone.visible .phone-screen > *{
  will-change:transform,opacity,filter;
}

.app-page-phone.mobile-layered-phone.visible .phone-hero-card,
.app-choice-phone.mobile-layered-phone.visible .phone-hero-card{
  animation:innerPhoneLayerSharp .58s cubic-bezier(.22,.88,.22,1.04) forwards, heroBreathe 8s ease-in-out 1s infinite;
}
.app-page-phone.mobile-layered-phone.visible .phone-float-note-a,
.app-choice-phone.mobile-layered-phone.visible .phone-float-note-a{
  animation:innerPhoneLayerSharp .58s cubic-bezier(.22,.88,.22,1.04) forwards, noteFloatA 6.8s ease-in-out 1.2s infinite;
}
.app-page-phone.mobile-layered-phone.visible .phone-float-note-b,
.app-choice-phone.mobile-layered-phone.visible .phone-float-note-b{
  animation:innerPhoneLayerSharp .58s cubic-bezier(.22,.88,.22,1.04) forwards, noteFloatB 7.4s ease-in-out 1.4s infinite;
}
.app-page-phone.mobile-layered-phone.visible .phone-list .phone-row,
.app-choice-phone.mobile-layered-phone.visible .phone-list .phone-row{
  animation-name:innerPhoneLayerSharp, premiumRowDrift;
  animation-duration:.58s, 8.5s;
  animation-timing-function:cubic-bezier(.22,.88,.22,1.04), ease-in-out;
  animation-fill-mode:forwards, both;
  animation-iteration-count:1, infinite;
}
.app-page-phone.mobile-layered-phone.visible .phone-chart,
.app-choice-phone.mobile-layered-phone.visible .phone-chart{
  animation-name:innerPhoneLayerSharp, chartGlowDrift;
  animation-duration:.58s, 7.8s;
  animation-timing-function:cubic-bezier(.22,.88,.22,1.04), ease-in-out;
  animation-fill-mode:forwards, both;
  animation-iteration-count:1, infinite;
}
.app-page-phone.mobile-layered-phone.visible .phone-chart{animation-delay:.46s, 1.2s}
.app-page-phone.mobile-layered-phone.visible .phone-list .phone-row:nth-child(1),
.app-choice-phone.mobile-layered-phone.visible .phone-list .phone-row:nth-child(1){animation-delay:.22s, 1.2s !important}
.app-page-phone.mobile-layered-phone.visible .phone-list .phone-row:nth-child(2),
.app-choice-phone.mobile-layered-phone.visible .phone-list .phone-row:nth-child(2){animation-delay:.30s, 1.45s !important}
.app-page-phone.mobile-layered-phone.visible .phone-list .phone-row:nth-child(3),
.app-choice-phone.mobile-layered-phone.visible .phone-list .phone-row:nth-child(3){animation-delay:.38s, 1.7s !important}

@keyframes heroBreathe{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(0,-2px,0) scale(1.012)}
}
@keyframes noteFloatA{
  0%,100%{transform:translate3d(4px,-2px,0)}
  50%{transform:translate3d(7px,-6px,0)}
}
@keyframes noteFloatB{
  0%,100%{transform:translate3d(-3px,0,0)}
  50%{transform:translate3d(-7px,-5px,0)}
}
@keyframes premiumRowDrift{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-4px,0)}
}
@keyframes chartGlowDrift{
  0%,100%{box-shadow:0 20px 34px rgba(18,66,90,.10),0 9px 18px rgba(56,145,188,.05),inset 0 1px 0 rgba(255,255,255,.98)}
  50%{box-shadow:0 26px 40px rgba(18,66,90,.14),0 12px 20px rgba(56,145,188,.08),inset 0 1px 0 rgba(255,255,255,.98)}
}

@media (prefers-reduced-motion:reduce){
  .app-page-phone.mobile-layered-phone.visible .phone-hero-card,
  .app-choice-phone.mobile-layered-phone.visible .phone-hero-card,
  .app-page-phone.mobile-layered-phone.visible .phone-float-note-a,
  .app-choice-phone.mobile-layered-phone.visible .phone-float-note-a,
  .app-page-phone.mobile-layered-phone.visible .phone-float-note-b,
  .app-choice-phone.mobile-layered-phone.visible .phone-float-note-b,
  .app-page-phone.mobile-layered-phone.visible .phone-list .phone-row,
  .app-choice-phone.mobile-layered-phone.visible .phone-list .phone-row,
  .app-page-phone.mobile-layered-phone.visible .phone-chart,
  .app-choice-phone.mobile-layered-phone.visible .phone-chart{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}


/* Inner mobile app pages: simple static phone image for perfect alignment */
.app-page-static-phone{
  display:grid;
  place-items:center;
  min-width:0;
}
.app-page-static-phone::before,
.app-page-static-phone::after{display:none!important}
.app-page-static-phone img{
  display:block;
  width:min(360px,88%);
  height:auto;
  max-height:640px;
  object-fit:contain;
  filter:none;
  transform:none;
  animation:none;
}
.app-page-hero .app-page-static-phone img{
  width:min(385px,92%);
}
.app-choice-grid .app-page-static-phone img{
  width:min(330px,86%);
  max-height:570px;
}
@media(max-width:760px){
  .app-page-static-phone img,
  .app-page-hero .app-page-static-phone img,
  .app-choice-grid .app-page-static-phone img{width:min(300px,82vw);max-height:none}
}


/* ===== 2026-08-11 Readability font-size update ===== */
:root{--site-visual-scale:1}
@supports not (zoom: .91){html{font-size:100%}}
body{font-size:17px;line-height:1.68}
.nav-link{font-size:14.5px}
.dropdown-panel strong{font-size:15px}
.dropdown-panel small{font-size:13px}
.btn{font-size:14.5px}
.btn-sm{font-size:14px}
.btn-lg{font-size:16.5px}
.hero-lead{font-size:clamp(17px,1.55vw,19px)}
.hero-points span{font-size:13.5px}
.section-head p{font-size:18px}
.source-copy{font-size:17px}
.source-copy p{font-size:17px;line-height:1.78}
.source-copy > p:first-child{font-size:18px}
.content-checklist li{font-size:16px}
.value-card p,.module-card p,.step-card p,.process-card p,.related-card p{font-size:15.5px}
.value-card h3,.module-card h3{font-size:21px}
.process-card h3,.process-card h4{font-size:19px}
.faq-question{font-size:17px}
.faq-answer{font-size:16.5px}
.seo-table th,.seo-table td{font-size:15.5px}
.site-footer p,.site-footer a{font-size:15px}
.site-footer h3{font-size:15.5px}
.footer-bottom{font-size:14px}

@media(max-width:700px){
  body{font-size:16px}
  .nav-link{font-size:15px}
  .hero-lead{font-size:17px}
  .source-copy p{font-size:16px}
  .source-copy > p:first-child{font-size:17px}
  .content-checklist li{font-size:15px}
  .faq-question{font-size:16px}
}

/* ===== Homepage visibility and complete loan solutions patch (2026-08-19) ===== */
/* Keep all eight lending solutions visually consistent and readable. */
.loan-visual-grid{align-items:stretch}
.loan-visual-card{height:100%}
.loan-visual-copy h3{color:#12344d}
.loan-visual-copy p{color:#607789}
.loan-visual-copy b{color:#0589bf}

/* Restore strong contrast in the dark "Why lenders choose Finsta" band. */
.section-dark .split-copy h2{color:#f7fffb!important}
.section-dark .split-copy p{color:#d7ebe2!important}
.section-dark .section-kicker.light{color:#dff7ec!important;background:rgba(215,244,230,.12)!important;border-color:rgba(215,244,230,.28)!important}
.section-dark .feature-list li{
  color:#e9f7f1!important;
  background:rgba(255,255,255,.075)!important;
  border-color:rgba(220,245,233,.16)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.section-dark .feature-list li::before{
  background-color:#2d8065;
  box-shadow:0 0 0 4px rgba(104,190,157,.10);
}

/* Make the Insights CTA fully visible instead of clipped/washed out. */
.home-blog-section .section-head-split .btn-ghost{
  flex:0 0 auto;
  min-width:178px;
  min-height:48px;
  padding:13px 24px!important;
  color:#0a749f!important;
  background:#ffffff!important;
  border:1.5px solid #9bd5e9!important;
  box-shadow:0 10px 26px rgba(31,112,148,.10);
  overflow:hidden;
  opacity:1!important;
  visibility:visible!important;
}
.home-blog-section .section-head-split .btn-ghost::after{display:none!important}
.home-blog-section .section-head-split .btn-ghost:hover{
  color:#075c80!important;
  background:#eefaff!important;
  border-color:#5bb9dc!important;
}

@media(max-width:760px){
  .home-blog-section .section-head-split .btn-ghost{display:inline-flex;width:auto;min-width:170px}
}



/* Duplicate intro cleanup: keep the page TOC but remove repeated answer cards on pillar pages */
.answer-overview.toc-only{padding-block:46px}
.answer-overview.toc-only .answer-grid{grid-template-columns:1fr}
.answer-overview.toc-only .page-toc{width:100%;max-width:none}
@media (min-width:900px){.answer-overview.toc-only .page-toc ol{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:26px}}
@media (max-width:899px){.answer-overview.toc-only{padding-block:34px}}


/* CTA highlight update: make action links more visible across cards and overview sections */
.module-card > span:last-child,
.related-card > b:last-child,
.related-card-media > b:last-child,
.loan-example-card > b:last-child,
.answer-box > a,
.insight-link{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  width:auto !important;
  margin-top:20px !important;
  padding:12px 18px !important;
  border-radius:999px !important;
  background:linear-gradient(135deg,#087fab,#159bd3) !important;
  color:#fff !important;
  border:1px solid #159bd3 !important;
  box-shadow:0 12px 28px rgba(8,127,171,.18) !important;
  font-size:14px !important;
  font-weight:800 !important;
  line-height:1.1 !important;
  text-decoration:none !important;
}

.module-card > span:last-child::after,
.related-card > b:last-child::after,
.related-card-media > b:last-child::after,
.loan-example-card > b:last-child::after,
.answer-box > a::after,
.insight-link::after{
  content:"→" !important;
  display:inline-block !important;
  font-size:15px !important;
  line-height:1 !important;
  transition:transform .22s ease !important;
}

.module-card:hover > span:last-child,
.related-card:hover > b:last-child,
.related-card-media:hover > b:last-child,
.loan-example-card:hover > b:last-child,
.answer-box > a:hover,
.insight-link:hover{
  background:linear-gradient(135deg,#f58220,#ff9f3f) !important;
  border-color:#f58220 !important;
  color:#fff !important;
  box-shadow:0 16px 32px rgba(245,130,32,.24) !important;
  transform:translateY(-2px) !important;
}

.module-card:hover > span:last-child::after,
.related-card:hover > b:last-child::after,
.related-card-media:hover > b:last-child::after,
.loan-example-card:hover > b:last-child::after,
.answer-box > a:hover::after,
.insight-link:hover::after{
  transform:translateX(3px) !important;
}

/* Keep CTA alignment neat inside cards */
.module-card,
.related-card,
.related-card-media,
.loan-example-card{
  display:flex;
  flex-direction:column;
}

.module-card > span:last-child,
.related-card > b:last-child,
.related-card-media > b:last-child,
.loan-example-card > b:last-child{
  margin-top:auto !important;
}

@media (max-width: 768px){
  .module-card > span:last-child,
  .related-card > b:last-child,
  .related-card-media > b:last-child,
  .loan-example-card > b:last-child,
  .answer-box > a,
  .insight-link{
    padding:11px 16px !important;
    font-size:13.5px !important;
  }
}


/* Extra CTA buttons for mobile app connected-platform cards */
.related-card-actions{
  min-height: 220px;
}
.related-card-actions h3{
  margin-bottom: 16px;
}
.related-card-actions .card-cta-row{
  display:flex;
  gap:12px;
  align-items:center;
  margin-top:auto;
  width:100%;
}
.related-card-actions .card-cta-row .btn{
  flex:1 1 0;
  justify-content:center;
  min-height:48px;
  padding:12px 16px;
}
.related-card-actions .card-cta-row .btn.btn-ghost{
  background:#fff !important;
}
@media (max-width: 767px){
  .related-card-actions .card-cta-row{
    flex-direction:column;
  }
  .related-card-actions .card-cta-row .btn{
    width:100%;
  }
}


/* ========================================================================
   2026-08-19 UX / engagement / SEO-friendly visual polish
   Clean hierarchy, scan-friendly answers, stronger CTAs, accessible focus.
   ======================================================================== */
:root{
  --engage-blue:#0794c8;
  --engage-blue-dark:#066f9b;
  --engage-orange:#f58220;
  --engage-ink:#123a55;
  --engage-soft:#f4fbff;
  --engage-border:#cfe8f4;
}
html{scroll-padding-top:104px}
body{background:linear-gradient(180deg,#fbfeff 0%,#f5fbfe 44%,#fff 100%)}
::selection{background:rgba(7,148,200,.2);color:#0d3853}
a,button{transition:color .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(245,130,32,.45);outline-offset:3px}

/* Stronger section rhythm and headings */
.section{position:relative}
.section-head{position:relative}
.section-head h2{letter-spacing:-.025em;text-wrap:balance}
.section-head h2::after,.source-section .section-head h2::after{
  content:"";display:block;width:58px;height:4px;margin-top:14px;border-radius:99px;
  background:linear-gradient(90deg,var(--engage-blue),var(--engage-orange));
  box-shadow:0 4px 14px rgba(7,148,200,.16)
}
.section-head-centered h2::after{margin-left:auto;margin-right:auto}
.section-kicker{
  border:1px solid #c9e6f2!important;background:linear-gradient(135deg,#f2fbff,#fff7ef)!important;
  color:#087eaa!important;box-shadow:0 6px 18px rgba(27,113,150,.06)
}

/* Make answer-led content easier to scan without adding repetitive labels */
.source-section{position:relative}
.source-copy>p:first-child{
  font-size:clamp(16px,1.25vw,18px);line-height:1.75;color:#284f63;
  background:linear-gradient(135deg,rgba(232,248,255,.78),rgba(255,248,241,.75));
  border:1px solid #d6ebf4;border-left:4px solid var(--engage-blue);
  border-radius:16px;padding:18px 20px;box-shadow:0 10px 28px rgba(28,91,122,.06)
}
.source-copy strong{color:#133f58}
.source-copy a,.inline-link{font-weight:750;text-decoration-thickness:1.5px}

/* Checklists become compact benefit cards */
.content-checklist{display:grid;gap:10px}
.content-checklist li{
  background:rgba(255,255,255,.78);border:1px solid #dcecf3;border-radius:14px;
  padding:12px 14px 12px 42px!important;box-shadow:0 6px 18px rgba(24,82,111,.045)
}
.content-checklist li::before{
  left:14px!important;top:12px!important;width:20px!important;height:20px!important;border-radius:50%!important;
  background:linear-gradient(135deg,var(--engage-blue),#35aee5)!important;color:#fff!important;
  display:grid!important;place-items:center!important;box-shadow:0 4px 12px rgba(7,148,200,.2)
}

/* Answer overview / page TOC */
.answer-box,.page-toc{
  border-color:#cce5f1!important;box-shadow:0 18px 44px rgba(22,84,114,.08)!important;
}
.answer-box{background:radial-gradient(circle at 100% 0,rgba(53,174,229,.15),transparent 35%),linear-gradient(145deg,#fff,#f5fbff)!important}
.answer-box h2{color:#123a55;text-wrap:balance}
.answer-box>p{font-size:16.5px;line-height:1.72}
.page-toc{background:linear-gradient(145deg,#f9fdff,#fff9f4)!important}
.page-toc strong{color:#087fab!important;letter-spacing:.12em!important}
.page-toc li{border-radius:10px;transition:background .2s ease,transform .2s ease}
.page-toc li:hover,.page-toc li.is-active{background:rgba(7,148,200,.07);transform:translateX(3px)}
.page-toc li.is-active a{color:#087fab!important;font-weight:800}

/* Data tables: easier scanning */
.seo-table-wrap{border:1px solid #d7e9f1!important;border-radius:18px!important;box-shadow:0 12px 30px rgba(19,72,100,.06)!important;overflow:auto!important}
.seo-table thead th{background:linear-gradient(135deg,#e9f8ff,#f6fbfe)!important;color:#123f5a!important}
.seo-table tbody tr:nth-child(even){background:#fbfdfe}
.seo-table tbody tr:hover{background:#f1f9fd}

/* Card polish & clearer interaction */
.module-card,.related-card,.related-card-media,.loan-visual-card,.feature-card,.solution-card,.process-card,.info-card,.use-case-card,.insight-index-card{
  box-shadow:0 12px 30px rgba(24,80,108,.055);
}
.module-card:hover,.related-card:hover,.related-card-media:hover,.loan-visual-card:hover,.feature-card:hover,.solution-card:hover,.process-card:hover,.info-card:hover,.use-case-card:hover,.insight-index-card:hover{
  transform:translateY(-6px)!important;box-shadow:0 22px 46px rgba(20,86,117,.12)!important;border-color:#8fd3eb!important
}
.module-card h3,.related-card h3,.loan-visual-card h3{letter-spacing:-.015em;text-wrap:balance}

/* CTA hierarchy */
.btn-primary,.nav-cta.btn-primary{
  background:linear-gradient(135deg,#078fc1,#18a8dc)!important;border-color:#078fc1!important;
  color:#fff!important;box-shadow:0 12px 28px rgba(7,143,193,.2)!important
}
.btn-primary:hover,.nav-cta.btn-primary:hover{
  background:linear-gradient(135deg,#f58220,#ff9f3f)!important;border-color:#f58220!important;
  box-shadow:0 16px 34px rgba(245,130,32,.24)!important;transform:translateY(-3px)
}
.btn-ghost,.btn-outline-dark{background:#fff!important;border-color:#bfe0ee!important;color:#17445e!important}
.btn-ghost:hover,.btn-outline-dark:hover{background:#edf9fe!important;border-color:#65c4e5!important;color:#0b6f98!important}

/* FAQ: attractive, calmer, answer-focused */
.faq-list{display:grid;gap:12px}
.faq-item{
  border:1px solid #d4e8f1!important;border-radius:18px!important;background:rgba(255,255,255,.9)!important;
  box-shadow:0 8px 24px rgba(23,78,105,.045);overflow:hidden
}
.faq-item:has(.faq-question[aria-expanded="true"]){border-color:#8fd0e8!important;box-shadow:0 16px 34px rgba(16,118,159,.1)}
.faq-question{padding:18px 20px!important;color:#173e56!important;font-size:16px!important}
.faq-question:hover{background:#f5fbfe!important}
.faq-question i{background:#e8f7fd!important;color:#087fab!important;border-radius:50%!important;width:28px!important;height:28px!important;display:grid!important;place-items:center!important}
.faq-answer{background:linear-gradient(180deg,#fff,#fbfdff)}
.faq-answer p{line-height:1.75!important}

/* Insight/article legibility */
.article-body p,.insight-article p{line-height:1.8}
.insight-meta{border-color:#d8eaf1!important}

/* Floating conversion dock: visible after meaningful engagement, dismissible */
.engagement-dock{
  position:fixed;right:22px;bottom:22px;z-index:90;display:flex;align-items:center;gap:14px;
  width:min(430px,calc(100vw - 36px));padding:13px 14px 13px 17px;border:1px solid #bfe1ef;border-radius:18px;
  background:rgba(255,255,255,.94);box-shadow:0 20px 50px rgba(17,78,106,.18);backdrop-filter:blur(14px);
  opacity:0;visibility:hidden;transform:translateY(18px);transition:.28s ease
}
.engagement-dock.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.engagement-dock__copy{min-width:0;flex:1}
.engagement-dock__copy strong{display:block;color:#113e58;font-size:14.5px;line-height:1.25}
.engagement-dock__copy span{display:block;margin-top:3px;color:#6a8391;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.engagement-dock .btn{white-space:nowrap;padding:10px 15px!important;min-height:40px}
.engagement-dock__close{width:30px;height:30px;border:0;border-radius:50%;background:#f1f7fa;color:#57717f;cursor:pointer;font-size:18px;line-height:1}
.engagement-dock__close:hover{background:#ffece0;color:#c85c0b}

/* Mobile performance & visual restraint */
@media(max-width:768px){
  html{scroll-padding-top:82px}
  .section-head h2::after,.source-section .section-head h2::after{width:46px;height:3px;margin-top:10px}
  .source-copy>p:first-child{padding:15px 16px;font-size:16px}
  .content-checklist li{padding:11px 12px 11px 39px!important}
  .engagement-dock{right:12px;left:12px;bottom:12px;width:auto;border-radius:16px;padding:11px 11px 11px 14px}
  .engagement-dock__copy span{display:none}.engagement-dock .btn{padding:9px 13px!important;font-size:13px!important}
}
@media(prefers-reduced-motion:reduce){.engagement-dock,.page-toc li{transition:none!important}}

/* FINSTA footer logo update */
.footer-brand img.footer-logo-new{
  width:230px;
  height:auto;
  max-width:100%;
  margin-bottom:20px;
  filter:none;
  background:#fff;
  padding:6px 10px;
  border-radius:10px;
  box-sizing:border-box;
  object-fit:contain;
}