/* ===================================================================
   SaleSys hero - faithful port of myflow for-banks-credit hero,
   re-skinned: thin Nunito · accents black + #1665c0 · white background.
   Brand rule: regular (400) is the heaviest weight - NEVER bold.
   =================================================================== */

/* ---------- brand rule: nothing heavier than regular ----------
   Container/text selectors only (never targets icon-font <i> elements,
   which carry their own font-weight, so icons stay intact). */
h1,h2,h3,h4,h5,h6,
p, strong, b, em,
.elementor-heading-title,
.elementor-widget-text-editor,
.elementor-button, .elementor-button-text,
.elementor-nav-menu a, .elementor-nav-menu--dropdown a,
.elementor-price-table__title,
.elementor-price-table__subtitle,
.elementor-price-table__features-list li,
.elementor-price-table__price,
.elementor-price-table__currency,
.elementor-price-table__integer-part,
.elementor-price-table__after-price,
.elementor-price-table__period,
.elementor-icon-list-text,
.fb-hero, .fb-hero *{
  font-weight:400 !important;
}
/* size → weight: the bigger the text, the thinner.
   palette = thin(200) · light(300) · regular(400, the heaviest we allow) */
.fb-title, .fb-title *{ font-weight:200 !important; }   /* hero = absolute thinnest */
h1{ font-weight:200 !important; }                        /* biggest headings = thin  */
h2, h3{ font-weight:300 !important; }                    /* large headings = light   */

/* shine (purple → SaleSys blue), thin to match the headline */
.shine{
  font-weight:200 !important;
  background:linear-gradient(90deg,#1665c0,#5aa9ff,#1665c0);
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:shineMove 3s linear infinite;
}
@keyframes shineMove{ to{ background-position:200% center; } }

/* buttons (regular weight, blue / black on white) */
.fb-hero .btn-primary, .ls-cta .btn-primary, .tp-cta, .nx .btn-primary{
  background:#1665c0; color:#fff; padding:14px 32px; border-radius:999px;
  font-family:"Nunito",sans-serif; font-size:15px;
  display:inline-block; text-decoration:none;
  transition:background .2s ease, transform .15s ease, box-shadow .3s ease;
}
.fb-hero .btn-primary:hover, .ls-cta .btn-primary:hover, .tp-cta:hover, .nx .btn-primary:hover{ background:#125aad; transform:translateY(-1px); box-shadow:0 8px 24px rgba(22,101,192,.28); }
.fb-hero .btn-outline, .ls-cta .btn-outline, .nx .btn-outline{
  background:transparent; color:#111; padding:14px 32px; border-radius:999px;
  font-family:"Nunito",sans-serif; font-size:15px;
  border:2px solid #e2e6ea; display:inline-block; text-decoration:none;
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.fb-hero .btn-outline:hover, .ls-cta .btn-outline:hover, .nx .btn-outline:hover{ border-color:#1665c0; color:#1665c0; background:#f2f8ff; }

/* ---- hero shell (full height, white) ---- */
.fb-hero{
  background:#ffffff;
  min-height:720px; display:flex; align-items:flex-start;
  padding:150px 0 24px; overflow:hidden; position:relative;
}
.fb-hero-inner{
  max-width:1320px; margin:0 auto; padding:0 24px; width:100%;
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:stretch;
}
/* pull the mock up so the screenshot's top lines up with the headline top
   (the caption bar sits above the screen by ~60px, so offset it back) */
.hero-mock{ margin-top:-56px; }

/* copy */
.fb-copy{ margin-top:48px; display:flex; flex-direction:column; }
.fb-title{
  font-family:"Nunito",sans-serif;
  font-size:clamp(2.6rem,5vw,4.15rem); line-height:1.1; letter-spacing:-.025em;
  color:#111; margin:0 0 30px;
}
.fb-lead{
  font-family:"Nunito Sans","Nunito",sans-serif;
  font-size:clamp(1.05rem,1.4vw,1.3rem); line-height:1.45; color:#39424f;
  max-width:none; margin:0 0 34px;
}
.fb-lead strong{ color:#1665c0; }   /* emphasis via colour, not weight */
.fb-cta{ display:flex; flex-wrap:wrap; gap:12px; }

/* ---- framed, bleeding mockup + caption bar (ported) ---- */
.hero-mock{ position:relative; min-height:440px; }
.hm-frame{ position:absolute; left:0; top:0; width:520px; }
@media (min-width:768px){ .hm-frame{ width:760px; } }
@media (min-width:1280px){ .hm-frame{ width:880px; } }
.hm-stack{
  position:relative; z-index:3; margin-top:60px;
  filter:drop-shadow(0 34px 64px rgba(20,60,120,.18));
  -webkit-mask-image:linear-gradient(to right,#000 60%,transparent 97%),linear-gradient(to bottom,#000 52%,transparent 84%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,#000 60%,transparent 97%),linear-gradient(to bottom,#000 52%,transparent 84%);
  mask-composite:intersect;
  opacity:0; transform:translateY(22px);
  animation:hmRise 1s cubic-bezier(.22,1,.36,1) .05s forwards;
}
.hm-base{ display:block; width:100%; height:auto; }
.hm-shot{ position:absolute; inset:0; width:100%; height:auto; opacity:0; transition:opacity 1.1s ease; }
.hm-shot.on{ opacity:1; }
@media (min-width:1280px){ .hm-stack{ -webkit-mask-image:linear-gradient(to right,#000 54%,transparent 94%),linear-gradient(to bottom,#000 52%,transparent 84%); mask-image:linear-gradient(to right,#000 54%,transparent 94%),linear-gradient(to bottom,#000 52%,transparent 84%); } }
@keyframes hmRise{ to{ opacity:1; transform:translateY(0); } }
.hm-fade{
  position:absolute; left:0; right:0; bottom:0; height:46%; z-index:4; pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,0) 0%, #fff 62%);
  -webkit-mask-image:linear-gradient(to right,#000 62%,transparent 96%);
  mask-image:linear-gradient(to right,#000 62%,transparent 96%);
}
.hm-bar{
  position:absolute; z-index:1; left:0; top:0; width:100%;
  display:flex; align-items:center; gap:16px; padding:15px 22px 30px;
  background:#fff; border-top-left-radius:20px;
  -webkit-mask-image:linear-gradient(to right,#000 64%,transparent 95%);
  mask-image:linear-gradient(to right,#000 64%,transparent 95%);
  opacity:0; transform:translateY(46px);
  animation:hmBarUp .85s cubic-bezier(.22,1,.36,1) .4s forwards;
}
@keyframes hmBarUp{ to{ opacity:1; transform:translateY(0); } }
.hm-note-title{ font-family:"Nunito",sans-serif; font-size:15.5px; color:#111; white-space:nowrap; }
.hm-word{ display:inline-block; opacity:0; transform:translateY(9px); animation:hmWordIn .75s cubic-bezier(.22,1,.36,1) calc(1s + var(--i,0) * .13s) forwards; }
@keyframes hmWordIn{ to{ opacity:1; transform:translateY(0); } }
.hm-note-btn{
  flex:none; display:inline-flex; align-items:center; gap:7px;
  background:#e7f0fb; color:#1665c0;
  padding:8px 16px; border-radius:999px;
  font-family:"Nunito",sans-serif; font-size:13px; text-decoration:none;
  cursor:pointer; border:0;
  opacity:0; animation:hmWordIn .6s cubic-bezier(.22,1,.36,1) 1.9s forwards;
}
.hm-note-btn:hover{ background:#d7e6f8; }
.hm-note-btn svg{ width:12px; height:12px; }

/* CTA + feature cards: give the 3 cards their own breathing section */
.elementor-element-14cdae1{ margin-top:72px !important; padding-bottom:48px; }
.elementor-element-8e19f65{ margin-top:88px !important; padding-top:64px; border-top:1px solid #eef1f4; }

/* ---- responsive ---- */
@media (max-width:991px){
  .fb-hero{ min-height:auto; padding:120px 0 40px; }
  .fb-hero-inner{ grid-template-columns:1fr; gap:20px; }
  .fb-copy{ text-align:center; margin-top:0; }
  .fb-lead{ margin-left:auto; margin-right:auto; }
  .fb-cta{ justify-content:center; }
  .hero-mock{ min-height:340px; }
  .hm-frame{ position:relative; width:100%; max-width:560px; margin:0 auto; }
  .hm-note-title{ white-space:normal; }
}

/* hero subtitle */
.fb-subtitle{ font-family:"Nunito",sans-serif; font-weight:200 !important; font-size:clamp(1.5rem,2.5vw,2.25rem); line-height:1.15; letter-spacing:-.02em; color:#39424f; margin:-6px 0 26px; }
@media (max-width:991px){ .fb-subtitle{ text-align:center; } }

/* hero feature squircle grid */
.fb-featwrap{ position:relative; width:min(660px,126%); max-width:none; margin:24px 0 0; margin-top:auto; z-index:5; }
.fb-feats{ position:relative; z-index:3; background:#fff; border:1px solid #eceff4; border-radius:18px; box-shadow:0 20px 46px rgba(20,60,120,.12);
  display:grid; grid-template-columns:repeat(4,1fr); overflow:hidden; }
.fb-feat{ display:flex; flex-direction:column; align-items:center; gap:9px; padding:22px 8px; text-align:center;
  border-right:1px solid #f1f3f7; border-bottom:1px solid #f1f3f7; transition:background .2s ease; }
.fb-feat:nth-child(4n){ border-right:0; }
.fb-feat:nth-child(n+5){ border-bottom:0; }
.fb-feat:hover{ background:#f7faff; }
.fb-feat-ic{ color:#1665c0; display:flex; align-items:center; justify-content:center; }
.fb-feat-ic svg{ width:24px; height:24px; }
.fb-feat-n{ font-family:"Nunito",sans-serif; font-weight:400 !important; font-size:12px; color:#39424f; white-space:nowrap; }
.fb-cascade{ position:absolute; inset:0; border-radius:18px; background:#fff; border:1px solid #eef1f5; pointer-events:none; transform-origin:top left; }
.fb-cascade1{ transform:translate(20px,16px) scale(.985); z-index:2; opacity:.72; box-shadow:0 16px 34px rgba(20,60,120,.10); }
.fb-cascade2{ transform:translate(40px,32px) scale(.97); z-index:1; opacity:.45; }
.fb-feat-more{ font-family:"Nunito",sans-serif; font-weight:400 !important; font-size:14px; color:#1665c0; margin:16px 0 28px; }
@media (max-width:991px){ .fb-featwrap{ margin-left:auto; margin-right:auto; } .fb-feat-more{ text-align:center; } }

/* industry cards -> buttons + expandable detail */
.bx2-card{ font:inherit; text-align:left; width:100%; cursor:pointer; -webkit-appearance:none; appearance:none; background:#fff !important; }
.bx2-card:hover, .bx2-card:focus{ background:#fff !important; outline:none; }
.bx2-chev{ color:#1665c0; font-weight:400; display:inline-block; transition:transform .3s cubic-bezier(.22,1,.36,1); }
.bx2-card.on{ border-color:#1665c0 !important; box-shadow:0 22px 50px rgba(20,60,120,.15); }
.bx2-card.on .bx2-chev{ transform:rotate(45deg); }
.bx2-detail{ max-height:0; overflow:hidden; transition:max-height .55s cubic-bezier(.22,1,.36,1); }
.bx2-detail-inner{ display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:stretch; margin-top:18px; padding:26px; background:#fbfcfe; border:1px solid #eef1f5; border-radius:24px; }
.ind-illus{ position:relative; border-radius:18px; min-height:360px; overflow:hidden; padding:34px;
  background:linear-gradient(155deg,#e9f1fc,#f6faff); display:flex; align-items:center; justify-content:center;
  animation:indSlideL .55s cubic-bezier(.22,1,.36,1) both; }
@keyframes indSlideL{ from{ opacity:0; transform:translateX(-26px); } }
.ind-illus::after{ content:""; position:absolute; width:280px; height:280px; left:50%; bottom:-100px; transform:translateX(-50%);
  background:radial-gradient(circle,rgba(22,101,192,.16),transparent 66%); pointer-events:none; }
.il-card{ position:relative; z-index:1; width:300px; max-width:100%; background:#fff; border:1px solid #eef1f5; border-radius:16px;
  box-shadow:0 22px 46px rgba(20,60,120,.16); padding:18px; font-family:"Nunito",sans-serif; font-weight:400 !important; color:#2b3440; animation:indPop .5s cubic-bezier(.22,1,.36,1); }
@keyframes indPop{ from{ opacity:0; transform:translateY(14px) scale(.98); } }
.il-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.il-title{ font-size:15px; color:#111; }
.il-tag{ font-size:11px; color:#1665c0; background:#e7f0fb; border-radius:999px; padding:3px 9px; }
.il-row{ display:flex; align-items:center; gap:10px; font-size:13px; padding:7px 0; border-top:1px solid #f4f6f9; }
.il-row:first-of-type{ border-top:0; }
.il-dot{ width:8px; height:8px; border-radius:50%; background:#cdd7e3; flex:none; }
.il-dot.g{ background:#28a745; } .il-dot.b{ background:#1665c0; }
.il-pill{ margin-left:auto; font-size:11px; border-radius:999px; padding:3px 9px; background:#eef1f5; color:#69727d; }
.il-pill.g{ background:#e6f6ea; color:#1e7d34; } .il-pill.b{ background:#e7f0fb; color:#1665c0; }
.il-foot{ display:flex; gap:14px; margin-top:12px; }
.il-mini{ font-size:11px; color:#9aa3ad; }
.il-bar{ height:9px; border-radius:5px; background:#eef1f5; margin:8px 0; }
.il-bar.w90{width:90%;}.il-bar.w80{width:80%;}.il-bar.w70{width:70%;}.il-bar.w60{width:60%;}.il-bar.w50{width:50%;}
.il-sign{ display:flex; align-items:center; justify-content:space-between; margin:12px 0 4px; font-size:12px; color:#9aa3ad; }
.il-bankid{ font-size:11px; color:#fff; background:#235971; border-radius:6px; padding:4px 8px; }
.il-line{ display:flex; justify-content:space-between; font-size:13px; padding:8px 0; border-top:1px solid #f4f6f9; }
.il-line span{ color:#111; }
.il-line.total span{ color:#1665c0; }
.il-btn{ margin-top:14px; text-align:center; background:#1665c0; color:#fff; border-radius:999px; padding:10px; font-size:13px; }
.il-btn.sm{ margin-top:10px; padding:7px 14px; display:inline-block; }
.il-days{ display:flex; gap:6px; margin-bottom:12px; }
.il-day{ flex:1; text-align:center; font-size:11px; color:#9aa3ad; padding:8px 0; border-radius:8px; background:#f4f7fb; }
.il-day.on{ background:#1665c0; color:#fff; }
.il-slot{ background:#e7f0fb; border-left:3px solid #1665c0; border-radius:8px; padding:9px 11px; font-size:12px; color:#1665c0; margin-bottom:10px; }
.il-phone{ position:relative; z-index:1; width:194px; background:#fff; border:7px solid #101826; border-radius:32px; box-shadow:0 24px 48px rgba(20,60,120,.22); padding:18px 15px; font-family:"Nunito",sans-serif; }
.il-phone-top{ font-size:13px; color:#111; margin-bottom:12px; }
.il-map{ position:relative; z-index:1; width:330px; max-width:100%; height:230px; border-radius:16px; overflow:hidden;
  background:linear-gradient(135deg,#dfeafc,#eef4fd); box-shadow:0 22px 46px rgba(20,60,120,.16); animation:indPop .5s cubic-bezier(.22,1,.36,1); }
.il-map::before{ content:""; position:absolute; inset:0; background:
  repeating-linear-gradient(0deg,transparent 0 28px,rgba(22,101,192,.06) 28px 29px),
  repeating-linear-gradient(90deg,transparent 0 28px,rgba(22,101,192,.06) 28px 29px); }
.il-pin{ position:absolute; left:40%; top:34%; width:18px; height:18px; border-radius:50% 50% 50% 0; background:#1665c0; transform:rotate(-45deg); box-shadow:0 6px 14px rgba(22,101,192,.4); }
.il-float{ position:absolute; right:14px; bottom:14px; background:#fff; border-radius:12px; box-shadow:0 10px 24px rgba(20,60,120,.18); padding:12px 14px; font-size:12px; font-family:"Nunito",sans-serif; color:#2b3440; }
.ind-list{ display:flex; flex-direction:column; justify-content:center; }
.ind-list-h{ font-family:"Nunito",sans-serif; font-weight:300 !important; font-size:1.4rem; color:#111; margin:0 0 14px; }
.ind-item{ display:flex; align-items:center; gap:13px; padding:14px 16px; border-radius:12px; cursor:default;
  font-family:"Nunito",sans-serif; font-size:1.06rem; color:#4a535f; transition:background .2s ease, color .2s ease, transform .2s ease;
  animation:indSlideR .5s cubic-bezier(.22,1,.36,1) both; }
@keyframes indSlideR{ from{ opacity:0; transform:translateX(26px); } }
.ind-item .dot{ width:8px; height:8px; border-radius:50%; background:#cdd7e3; flex:none; transition:background .2s ease, transform .2s ease; }
.ind-item .ar{ margin-left:auto; color:#1665c0; opacity:0; transform:translateX(-6px); transition:opacity .2s ease, transform .2s ease; }
.ind-item.on{ background:#f2f8ff; color:#111; transform:translateX(4px); }
.ind-item.on .dot{ background:#1665c0; transform:scale(1.5); }
.ind-item.on .ar{ opacity:1; transform:none; }
@media (max-width:820px){ .bx2-detail-inner{ grid-template-columns:1fr; } .ind-illus{ min-height:220px; } }

.tp-logo{ height:34px !important; width:auto; display:block; margin:0 auto 26px; }

.wr{ display:inline-block; opacity:0; transform:translateY(0.5em); transition:opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1); will-change:opacity,transform; }
.wr.in{ opacity:1; transform:none; }

.ig-light{ position:absolute; left:50%; bottom:-8%; width:66%; height:62%; z-index:0; pointer-events:none;
  transform:translateX(-50%) scale(1); transform-origin:50% 100%;
  background:radial-gradient(ellipse at 50% 100%, rgba(22,101,192,.30), rgba(22,101,192,.08) 45%, transparent 72%);
  opacity:.6; }

.ig-spark{ position:absolute; left:0; top:0; z-index:1; pointer-events:none; border-radius:50%; opacity:0;
  background:radial-gradient(circle, rgba(120,180,255,.95), rgba(90,169,255,.45) 40%, transparent 72%); }

.tp-cta{ display:inline-block; margin-top:30px; color:#fff !important; }
.elementor-element-885230a{ display:none !important; }
.bx2-detail-inner{ margin:18px 0 30px !important; }

/* subtle grainy blue glow accents */
.gg{ position:absolute; pointer-events:none; z-index:0; }
.gg::before{ content:""; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(22,101,192,.20), rgba(40,130,230,.07) 42%, transparent 68%); filter:blur(8px); }
.gg::after{ content:""; position:absolute; inset:0; border-radius:50%; opacity:.5; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:160px 160px;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 38%,transparent 70%); mask-image:radial-gradient(circle at 50% 50%,#000 38%,transparent 70%); }
.gg-hero{ right:-6%; top:2%; width:640px; height:640px; }
.gg-ai{ left:46%; bottom:-16%; width:580px; height:470px; }
.gg-tp{ left:50%; top:14%; transform:translateX(-50%); width:740px; height:540px; }
.ai{ position:relative; }
.tp{ position:relative; overflow:hidden; }
.fb-hero-inner{ position:relative; z-index:1; }
.ai-inner{ position:relative; z-index:1; }
.tp-inner{ position:relative; z-index:1; }
.gg-wk{ left:-8%; top:10%; width:560px; height:520px; }
.gg-pr{ right:-6%; top:20%; width:620px; height:560px; }
html{ scroll-behavior:smooth; } #continue{ scroll-margin-top:90px; }
/* header: native sticky instead of Elementor's JS sticky (its spacer + negative margins made it jitter) */
header.elementor-location-header{ position:sticky; top:0; z-index:999; }