.ehf-header #masthead{
/*  position: absolute !important;*/
  width: 100% !important;
}


:root{
  --p:#7c3aed;
  --b:#2563eb;
  --ink:#0b1220;
  --br:rgba(15,23,42,.10);
  --glass:rgba(255,255,255,.72);
}

.fpg2-nav-wrap{background: transparent;}
.fpg2-nav{
  max-width:1200px;
  margin:0 auto;
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  position:relative;
}

/* Brand */
.fpg2-brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--ink);
}
.fpg2-logo-img{display:flex;align-items:center;justify-content:center;}
.fpg2-logo-imgtag{height:42px;width:auto;display:block;}
.fpg2-brand-text{font-weight:700;white-space:nowrap}

/* Menu wrapper */
.fpg2-links{flex:1; display:flex; justify-content:center;}
.fpg2-menu{
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:center;
  margin:0;
  padding:0;
}
.fpg2-menu li{list-style:none;margin:0;padding:0}
.fpg2-menu a{
  text-decoration:none;
  color:rgba(11,18,32,.72);
  padding:8px 10px;
  border-radius:999px;
  transition:.2s ease;
  font-weight:700;
  font-size:14px;
  white-space:nowrap;
}
.fpg2-menu a:hover{
  background:rgba(124,58,237,.08);
  color:rgba(11,18,32,.92);
}

/* Chevron for parents */
.fpg2-menu > li.menu-item-has-children > a{
  position:relative;
  padding-right:26px;
}
.fpg2-menu > li.menu-item-has-children > a::after{
  content:"";
  position:absolute;
  right:10px;
  top:50%;
  width:8px;height:8px;
  border-right:2px solid rgba(11,18,32,.60);
  border-bottom:2px solid rgba(11,18,32,.60);
  transform: translateY(-60%) rotate(45deg);
  transition: .2s ease;
}
.fpg2-menu > li.menu-item-has-children.submenu-open > a::after{
  transform: translateY(-40%) rotate(-135deg);
}

/* Buttons */
.fpg2-cta{display:flex;gap:10px;align-items:center}
.btn{
  text-decoration:none;
  font-weight:700;
  border-radius:999px;
  padding:10px 30px;
  font-size:14px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition:.2s ease;
  border:1px solid transparent;
  white-space:nowrap;
}
.btn.primary{
  color:#fff;
  background: linear-gradient(135deg, var(--p), var(--b));
  box-shadow: 0 18px 40px rgba(37,99,235,.18);
}
.btn.primary:hover{transform:translateY(-1px);box-shadow:0 22px 55px rgba(37,99,235,.22)}
.btn.ghost{
  color:rgba(11,18,32,.86);
  background: var(--glass);
  border-color: var(--br);
  box-shadow: 0 14px 30px rgba(15,23,42,.08);
}
.btn.ghost:hover{transform:translateY(-1px)}

/* Burger */
.fpg2-burger{display:none;background:transparent;border:0;padding:10px;border-radius:12px}
.fpg2-burger span{display:block;width:22px;height:2px;background:#1f2937;margin:5px 0;border-radius:3px;opacity:.8}

/* Mobile main menu panel */
.fpg2-menu.is-open{
  display:flex !important;
  flex-direction:column;
  position:absolute;
  right:18px;
  top:70px;
  background:rgba(255,255,255,.95);
  border:1px solid rgba(15,23,42,.10);
  border-radius:16px;
  padding:12px;
  box-shadow:0 22px 60px rgba(15,23,42,.16);
  width:260px;
  align-items:stretch;
  z-index:99999;
}
.fpg2-menu.is-open > li > a{display:block}


/* Responsive for 1024 and below */
@media (max-width: 1024px){
  .fpg2-links{justify-content:flex-end}
  .fpg2-menu{display:none}
  .fpg2-cta{display:none}
  .fpg2-burger{display:block}
}

@media (max-width: 1024px){
  .fpg2-links.is-open .fpg2-menu{
    display:flex !important;
    flex-direction:column;
    position:absolute;
    right:18px;
    top:70px;
    background:rgba(255,255,255,.95);
    border:1px solid rgba(15,23,42,.10);
    border-radius:16px;
    padding:12px;
    box-shadow:0 22px 60px rgba(15,23,42,.16);
    width:260px;
    align-items:stretch;
    z-index:99999;
  }

  .fpg2-links.is-open .fpg2-menu > li > a{display:block}
}

/* ✅ Mobile submenu inside the open panel */
@media (max-width: 1024px){
  .fpg2-links.is-open .fpg2-menu > li > ul.sub-menu{
    position:static;
    transform:none;
    width:100%;
    box-shadow:none;
    border-radius:14px;
    padding:10px;
    margin-top:8px;
    grid-template-columns: 1fr;
    gap:8px;
    display:none;
  }

  .fpg2-links.is-open .fpg2-menu > li.submenu-open > ul.sub-menu{
    display:grid;
  }
}


/* ===========================
   MEGA SUBMENU (2 columns)
=========================== */

.fpg2-menu > li{ position:relative; }

/* Dropdown panel */
.fpg2-menu > li > ul.sub-menu{
  position:absolute;
  left:50%;
  top:100%;
  margin-top:10px;
  transform:translateX(-50%);
  z-index:9999;

  width:min(720px, calc(100vw - 40px));
  padding:18px;
  border-radius:18px;

  background: rgba(255,255,255,1);
  border:1px solid rgba(15,23,42,.10);
  box-shadow: 0 30px 80px rgba(15,23,42,.16);

  display:none; /* default hidden */
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap:10px 26px;
}

/* Hover bridge (prevents closing when moving mouse down) */
@media (min-width: 981px){
  .fpg2-menu > li.menu-item-has-children::after{
    content:"";
    position:absolute;
    left:0; right:0;
    top:100%;
    height:18px;
    background:transparent;
  }

  .fpg2-menu > li:hover > ul.sub-menu,
  .fpg2-menu > li:focus-within > ul.sub-menu{
    display:grid;
  }
}

/* JS open */
.fpg2-menu > li.submenu-open > ul.sub-menu{
  display:grid;
}

/* Submenu items */
.fpg2-menu > li > ul.sub-menu > li{list-style:none;margin:0;padding:0}

/* Submenu links */
.fpg2-menu > li > ul.sub-menu > li > a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-radius:14px;
  font-weight:700;
  font-size:14px;
  color: rgba(11,18,32,.88);
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(15,23,42,.06);
}
.fpg2-menu > li > ul.sub-menu > li > a:hover{
  background: rgba(124,58,237,.08);
  border-color: rgba(124,58,237,.18);
}

/* Badges */
.fpg2-menu ul.sub-menu a[data-badge]{position:relative;padding-right:70px;}
.fpg2-menu ul.sub-menu a[data-badge]::after{
  content: attr(data-badge);
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  font-size:12px;
  font-weight:700;
  padding:4px 10px;
  border-radius:999px;
  background:#eee;
}
.fpg2-menu ul.sub-menu a[data-badge="Hot"]::after{background:#ffedd5;color:#9a3412;}
.fpg2-menu ul.sub-menu a[data-badge="Popular"]::after{background:#ffe4e6;color:#9f1239;}
.fpg2-menu ul.sub-menu a[data-badge="New"]::after{background:#dcfce7;color:#166534;}

/* Mobile submenu inside panel */
@media (max-width: 980px){
  .fpg2-menu.is-open > li > ul.sub-menu{
    position:static;
    transform:none;
    width:100%;
    box-shadow:none;
    border-radius:14px;
    padding:10px;
    margin-top:8px;
    grid-template-columns: 1fr;
    gap:8px;
    display:none;
  }
  .fpg2-menu.is-open > li.submenu-open > ul.sub-menu{
    display:grid;
  }
}


/* ===========================
   ACTIVE MENU ITEM
=========================== */

/* Top level active */
.fpg2-menu > li.current-menu-item > a,
.fpg2-menu > li.current_page_item > a,
.fpg2-menu > li.current-menu-ancestor > a,
.fpg2-menu > li.current-menu-parent > a{
  color: #0b1220;
  background: rgba(124,58,237,.12);
}


.fpg2-menu .sub-menu li.current-menu-item > a{
  background: rgba(124,58,237,.10);
  border-color: rgba(124,58,237,.25);
  color:#0b1220;
  font-weight:700;
}



/*[[[[[[[[[[[[[[[[[[[[[[[[[[[]]]]]]]]]]]]]]]]]]]]]]]]]]]*/


/* ✅ Smooth scroll + correct anchor offset (fix Watch Demo cut under header) */
html{
  scroll-behavior: smooth;
}

/* Default offset for #demo (works even without JS) */
#demo{
  scroll-margin-top: 160px; /* adjust if needed */
}

:root{
  /* ✅ Your logo colors */
  --p:#AF0E9D;
  --b:#120C7A;

  --pt:#af0e9d3b;
  --bt:#120c7a00;

  --ink:#0b1220;
  --muted:#5b6474;
  --br:rgba(15,23,42,.10);
  --glass:rgba(255,255,255,.75);
  --shadow:0 30px 80px rgba(15,23,42,.16);
  --shadow2:0 18px 45px rgba(15,23,42,.10);
  --r:22px;
}

.fpg-hero2{
  position:relative;
  overflow:hidden;
  background:#fff;
/*  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;*/
  color:var(--ink);

  /* ✅ Use clamp so spacing stays correct on desktop + mobile */
  padding: clamp(70px, 7vw, 110px) 0 0;
}

.fpg2-wrap{
  max-width:1100px;
  margin:0 auto;
  padding:0 18px 0;
  position:relative;
  z-index:2;
}

/* Background */
.fpg2-bg{position:absolute;inset:0;z-index:1;pointer-events:none}

.fpg2-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(175,14,157,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(18,12,122,0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: .55;
  mask-image: radial-gradient(circle at 50% 32%, #000 48%, transparent 78%);
}

.fpg2-blob{position:absolute;filter: blur(70px);opacity:.55;border-radius:50%}
.fpg2-blob.b1{
  width:540px;height:540px;left:-140px;top:-170px;
  background: radial-gradient(circle at 30% 30%, rgba(175,14,157,.50), transparent 60%),
              radial-gradient(circle at 70% 70%, rgba(18,12,122,.42), transparent 60%);
  animation: fpgFloat 10s ease-in-out infinite;
}
.fpg2-blob.b2{
  width:640px;height:640px;right:-220px;bottom:-260px;
  background: radial-gradient(circle at 30% 30%, rgba(18,12,122,.46), transparent 60%),
              radial-gradient(circle at 70% 70%, rgba(175,14,157,.34), transparent 60%);
  animation: fpgFloat 12s ease-in-out infinite reverse;
}

/* Buttons */
.btn{
  text-decoration:none;
  font-weight:700;
  border-radius:999px;
  padding:10px 14px;
  font-size:14px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition:.2s ease;
  border:1px solid transparent;
  white-space:nowrap;
}
.btn.primary{
  color:#fff;
  background: linear-gradient(135deg, var(--p), var(--b));
  box-shadow: 0 18px 40px rgba(18,12,122,.18);
}
.btn.primary:hover{transform:translateY(-1px);box-shadow:0 22px 55px rgba(18,12,122,.22)}
.btn.ghost{
  color:rgba(11,18,32,.86);
  background: var(--glass);
  border-color: var(--br);
  box-shadow: 0 14px 30px rgba(15,23,42,.08);
}
.btn.ghost:hover{transform:translateY(-1px)}
.btn.big{padding:12px 16px;font-size:15px}
.btn svg{width:18px;height:18px}

/* Top content */
.fpg2-top{max-width:820px;margin: 22px auto 0;text-align:center}
.fpg2-pill{
  display:inline-flex;align-items:center;gap:10px;
  border-radius:999px;padding:8px 12px;
  background: var(--glass);
  border:1px solid var(--br);
  box-shadow:0 14px 34px rgba(15,23,42,.08);
  color:rgba(11,18,32,.78);
  font-weight:700;font-size:13px;
}
.dot{
  width:10px;height:10px;border-radius:999px;
  background: linear-gradient(135deg, var(--p), var(--b));
  box-shadow:0 12px 25px rgba(175,14,157,.22);
}
.fpg2-h1{
  font-size: clamp(38px, 5vw, 62px);
  line-height:1.05;
  margin:16px 0 10px;
  letter-spacing:-.8px;
  font-weight:950;
}
.grad{
  background: linear-gradient(135deg, var(--p), var(--b));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.italic{font-style:italic}
.fpg2-sub{
  margin:0 auto 18px;
  font-size:16px;line-height:1.7;
  color:rgba(11,18,32,.70);
  max-width: 70ch;
}
.fpg2-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:10px}

.fpg2-stats{
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
  margin: 22px 0 12px;
}
.stat{
  background: var(--glass);
  border:1px solid var(--br);
  border-radius:16px;
  padding:12px 14px;
  box-shadow:0 16px 38px rgba(15,23,42,.08);
  min-width: 170px;
  text-align:left;
}
.stat b{display:block;font-weight:950;font-size:18px}
.stat span{display:block;color:rgba(11,18,32,.64);font-weight:700;font-size:13px;margin-top:2px}

.fpg2-trust{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap; margin-top: 25px;}
.fpg2-trust .label{color:rgba(11,18,32,.60);font-weight:700;font-size:13px}
.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.chip{
  padding:8px 10px;border-radius:999px;
  background: var(--glass);
  border:1px solid var(--br);
  box-shadow:0 14px 30px rgba(15,23,42,.06);
  font-weight:700;color:rgba(11,18,32,.74);font-size:13px
}

/* Screenshot */
.fpg2-screen{position:relative;margin: 28px auto 0;max-width: 1100px}
.screen-glow{
  position:absolute;inset:-24px;
  background:
    radial-gradient(circle at 30% 30%, rgba(175,14,157,.18), transparent 55%),
    radial-gradient(circle at 70% 60%, rgba(18,12,122,.14), transparent 55%);
  filter: blur(16px);
  z-index:0;
  bottom:0 !important;
  border-bottom-left-radius:0 !important;
  border-bottom-right-radius:0 !important;
}
.screen-frame{
  position:relative;z-index:1;margin:0;
  border-radius: var(--r);
  background: rgba(255,255,255,.62);
  border: 1px solid var(--br);
  box-shadow: var(--shadow);
  overflow:hidden;
  border-bottom-left-radius:0 !important;
  border-bottom-right-radius:0 !important;
  border: solid 5px rgba(255, 255, 255, 0.8);
}

/* macOS bar */
.screen-topbar{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  background: linear-gradient(180deg,#2f3542,#1f2430);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.mac-dots{display:flex;gap:7px;align-items:center}
.screen-topbar .dot{
  width:12px;height:12px;border-radius:50%;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.35);
}
.screen-topbar .dot.r{background:#ff5f57;}
.screen-topbar .dot.y{background:#febc2e;}
.screen-topbar .dot.g{background:#28c840;}
.tb-left,.tb-right{display:flex;gap:8px;align-items:center}
.ico{
  width:26px;height:26px;border-radius:8px;
  display:grid;place-items:center;
  color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
}
.ico svg{width:16px;height:16px}
.ico:hover{background: rgba(255,255,255,.10)}
.addr{
  flex:1;height:28px;border-radius:999px;
  display:flex;align-items:center;gap:8px;padding: 0 12px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.86);
  min-width: 220px;
}
.lock{display:grid;place-items:center;color: rgba(255,255,255,.75)}
.lock svg{width:14px;height:14px}
.urltext{
  font-weight:700;font-size:13px;letter-spacing:.2px;opacity:.92;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
@media (max-width:520px){
  .urltext{display:none}
  .addr{min-width:140px}
}

/* Placeholder */
.demo-placeholder{
  padding: 44px 26px;
  text-align:center;
  background:
    radial-gradient(circle at 30% 20%, rgba(175,14,157,.10), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(18,12,122,.08), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.72));
}
.ph-icon{
  width:68px;height:68px;border-radius:18px;margin:0 auto 14px;
  background: linear-gradient(135deg, rgba(175,14,157,.95), rgba(18,12,122,.95));
  box-shadow: 0 18px 44px rgba(18,12,122,.18);
  position:relative;
}
.ph-icon:before{
  content:"";
  position:absolute;inset:16px;
  border-radius:12px;
  background: rgba(255,255,255,.20);
  border: 1px solid rgba(255,255,255,.35);
}
.demo-placeholder h3{margin:0 0 8px;font-size:18px;font-weight:950;letter-spacing:-.2px}
.demo-placeholder p{
  margin:0 auto 14px;
  max-width:60ch;
  color:rgba(11,18,32,.70);
  font-weight:700;
  line-height:1.6;
  font-size:14px;
}
.ph-note{
  display:inline-block;
  padding:10px 12px;
  border-radius:12px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 14px 30px rgba(15,23,42,.06);
  font-weight:700;
  color: rgba(11,18,32,.78);
  font-size:13px;
}

/* Badges */
.badge{
  position:absolute;z-index:2;
  padding:10px 12px;border-radius:999px;
  font-weight:950;font-size:13px;
  background: rgba(255,255,255,.82);
  border:1px solid var(--br);
  box-shadow: var(--shadow2);
  color: rgba(11,18,32,.80);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.badge.b1{right:18px;top:-14px;background: linear-gradient(135deg, rgba(175,14,157,.14), rgba(18,12,122,.10))}
.badge.b2{left:18px;bottom:-14px}
.badge.b3{right:160px;bottom:-14px}

@media (max-width: 980px){
  .stat{min-width:160px}
  .badge.b3{display:none}
}
@media (max-width: 520px){
  .stat{min-width:150px}
  .badge{font-size:12px;padding:9px 10px}
}

@keyframes fpgFloat{
  0%,100%{transform: translateY(0)}
  50%{transform: translateY(-10px)}
}

/* ✅ Prevent scroll target hiding because of sticky header */
.fpg2-screen{
  scroll-margin-top: 160px; /* same as #demo */
}



/*///////////////////////////*/

/* ===========================
   Badges / Tags (match screenshot)
=========================== */
.badge{
  position:absolute;
  z-index:3;
  padding:10px 14px;
  border-radius:999px;
  font-weight:800;
  font-size:13px;
  background: rgba(255,255,255,.88);
  border:1px solid rgba(15,23,42,.10);
  box-shadow: 0 18px 45px rgba(15,23,42,.12);
  color: rgba(11,18,32,.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  white-space:nowrap;
}

/* ✅ Position like your screenshot */
.badge.b1{ right:-10px; top:86px; }        /* 16+ layouts (right side) */
.badge.b2{ left:-18px; bottom:70px; }      /* AJAX Filter (left bottom) */
.badge.b3{ right:-18px; bottom:70px; }     /* Infinite Scroll (right bottom) */

/* small soft gradient tint */
.badge.b1{
  background: linear-gradient(135deg, rgba(175,14,157,.14), rgba(18,12,122,.10));
}
.badge.b2,.badge.b3{
  background: rgba(255,255,255,.90);
}

/* Mobile tighten */
@media (max-width: 980px){
  .badge.b1{ right:-8px; top:72px; }
  .badge.b2{ left:-10px; bottom:56px; }
  .badge.b3{ right:-10px; bottom:56px; }
}


/* ===========================
   Creative motion
=========================== */

/* badges float */
.badge{
  animation: fpgBadgeFloat 5.5s ease-in-out infinite;
}
.badge.b1{ animation-delay: .0s; }
.badge.b2{ animation-delay: .6s; }
.badge.b3{ animation-delay: 1.2s; }

@keyframes fpgBadgeFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}

/* screen subtle lift on scroll (JS adds .is-in) */
.fpg2-screen{
  transform: translateY(22px);
  opacity: .01;
  transition: transform .8s ease, opacity .8s ease;
}
.fpg2-screen.is-in{
  transform: translateY(0);
  opacity: 1;
}

/* glow pulses slowly */
.screen-glow{
  animation: fpgGlow 6s ease-in-out infinite;
}
@keyframes fpgGlow{
  0%,100%{ opacity: .85; transform: scale(1); }
  50%{ opacity: 1; transform: scale(1.03); }
}


/* =================================
   FLOATING STAT BOXES ON SCREEN
================================= */

.fpg2-screen{ position:relative; }

/* base floating behaviour */
.stat-float{
  position:absolute;
  z-index:4;
  min-width:190px;
  pointer-events:none;
  backdrop-filter: blur(5px);
  animation: fpgStatFloat 6s ease-in-out infinite;
}

.stat-float::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:16px;
  padding:5px;
  background:linear-gradient(135deg,var(--pt),var(--bt));
  -webkit-mask:
     linear-gradient(#fff 0 0) content-box,
     linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}

/* positions (match your layout visually) */
.stat-float.s1{
  left:-40px;
  top:19%;
  animation-delay:0s;
}

.stat-float.s2{
  right:-50px;
  top:160px;
  animation-delay:.8s;
}

.stat-float.s3{
  left: 79px;
  transform:translateX(-50%);
  bottom: 57px;
  animation-delay:1.6s;
}

/* floating motion */
@keyframes fpgStatFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-14px); }
}

/* keep center box centered while animating */
.stat-float.s3{
  animation-name: fpgStatFloatCenter;
}

@keyframes fpgStatFloatCenter{
  0%,100%{ transform: translateX(-50%) translateY(0); }
  50%{ transform: translateX(-50%) translateY(-14px); }
}

/* ================= MOBILE ================= */

@media (max-width:980px){
  .stat-float{
    transform: scale(.9);
  }

  .stat-float.s1{ left:-20px; top:20px; }
  .stat-float.s2{ right:-20px; top:140px; }
  .stat-float.s3{ bottom:-20px; }
}

@media (max-width:640px){
  .stat-float{ display:none; } /* prevent clutter on small mobile */
}





/* ===========================
   FIX: header overlap + remove extra space
=========================== */

/* JS will set this dynamically */
:root{
  --fpg-offset: 0px;
}

/* ✅ Keep your requested 100px top padding */
.fpg-hero2{
  padding-top: 100px !important;
  padding-bottom: 0 !important;
}

/* ✅ Fix anchor overlap (header/adminbar) without changing hero padding */
#demo2{
  scroll-margin-top: calc(var(--fpg-offset) + 20px);
}

/* ✅ Remove unwanted bottom space */
.fpg2-wrap{ padding-bottom: 0 !important; }
.fpg2-screen{ margin-bottom: 0 !important; padding-bottom: 0 !important; }
.screen-frame, figure{ margin: 0 !important; }


figure{ margin: 0 !important; }

/* If Elementor/theme adds bottom spacing, force it */
.fpg-hero2 *:last-child{
  margin-bottom: 0 !important;
}


/* ===== FORCE SCREEN VISIBLE (fix hidden/opacity issue) ===== */
.fpg2-screen,
.fpg2-screen *{
  opacity: 1 !important;
}

.fpg2-screen{
  display:block !important;
  visibility: visible !important;
  position: relative !important;
  z-index: 5 !important;
}

.screen-frame,
.demo-placeholder{
  transform: none !important;
  filter: none !important;
}







/* ===============================
   INNER PAGE – HEADER BANNER
   =============================== */

.header-banner {
    position: relative;
    overflow: hidden;
    padding: 60px 20px 50px;
    text-align: center;
}

/* Gradient overlay */
.header-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: linear-gradient(29deg, #eaeaeaf5 46%, #dadadafc 100%) !important;
}

/* Keep content above overlay */
.header-banner > * {
    position: relative;
    z-index: 2;
}

/* ===============================
   FORCE TEXT COLOR (ONLY INSIDE BANNER)
   =============================== */

.header-banner .elementor-widget-container,
.header-banner .elementor-widget-container * {
    color: #000 !important;
}

/* ===============================
   HEADING
   =============================== */

.header-banner .elementor-widget-heading h1 {
    color: #090275 !important;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 10px;
}

/* ===============================
   PARAGRAPH
   =============================== */

.header-banner .elementor-widget-text-editor p {
    line-height: 1.6;
    margin: 0 auto 20px;
}

.header-banner .elementor-widget-text-editor p:last-child{
  margin-bottom: 0 !important;
}

/* ===============================
   REMOVE EXTRA ELEMENTOR SPACING
   =============================== */

.header-banner .elementor-widget {
    margin-bottom: 0 !important;
}

.header-banner .elementor-column-gap-default > .elementor-column > .elementor-element-populated {
    padding: 0 !important;
}

/* ===============================
   SOFT GLOW
   =============================== */

.header-banner::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle,
        rgba(124,58,237,0.12) 0%,
        transparent 70%);
    top: -120px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    filter: blur(60px);
}

/* ===============================
   MOBILE
   =============================== */

@media (max-width: 767px) {
    .header-banner {
        padding: 45px 15px 40px;
    }
}






/*////////////////////////////////////////
////////////////////////////////////////*/

/* =========================================================
   PRESET STYLES – LIGHT SaaS (CSS ONLY)
   Parent: .preset-styles
   No JS, no card/box layout
   ========================================================= */

/* Force light section */
.preset-styles{
  background:#fff !important;
  position: relative !important;
  overflow: hidden !important;
}

/* remove any gradient background set by Elementor on inner containers */
.preset-styles .e-con,
.preset-styles .e-con-inner{
  background: transparent !important;
}

/* soft, very light brand aura (optional) */
.preset-styles::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(18,12,122,.06), transparent 60%),
    radial-gradient(700px 360px at 12% 88%, rgba(175,14,157,.06), transparent 60%),
    radial-gradient(700px 360px at 88% 88%, rgba(18,12,122,.04), transparent 62%) !important;
}


/* =========================================================
   IMPORTANT:
   Remove "big wrapper boxes" look.
   Elementor containers sometimes have radius/bg/shadow.
   We force them OFF inside this section.
   ========================================================= */
.preset-styles .e-con.e-child{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* =========================================================
   TILE LOOK (image widget itself becomes the “tile”)
   ========================================================= */

/* center each image widget */
.preset-styles .elementor-widget-image .elementor-widget-container{
  display:flex !important;
  justify-content:center !important;
}

/* clean thumbnail (NOT inside a box) */
.preset-styles .elementor-widget-image img{
  width: min(320px, 100%) !important;
  height: auto !important;
  border-radius: 14px !important;
  box-shadow: 0 14px 34px rgba(18,12,122,.10) !important;
  transition: transform .28s ease, box-shadow .28s ease, filter .28s ease !important;
  will-change: transform !important;
}

/* smooth hover */
.preset-styles .elementor-widget-image:hover img{
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 0 22px 55px rgba(18,12,122,.14) !important;
  filter: saturate(1.02) !important;
}

/* title style (no underline) */
.preset-styles .elementor-widget-heading .elementor-heading-title{
  text-decoration: none !important;
}

.preset-styles .elementor-widget-heading .elementor-heading-title::after{
  content:none !important;
  display:none !important;
}

/* tile title spacing */
.preset-styles .e-con.e-child .elementor-widget-heading{
  margin-top: 10px !important;
}

.preset-styles .e-con.e-child .elementor-widget-heading .elementor-heading-title{
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .1px !important;
  color: #120C7A !important;
}

/* subtle brand hover color shift on title (smooth, not underline) */
.preset-styles .e-con.e-child:hover .elementor-widget-heading .elementor-heading-title{
  color: #AF0E9D !important;
  transition: color .25s ease !important;
}



/* =========================================================
   OPTIONAL: CSS-only reveal animation (no JS)
   Elements animate when page loads.
   ========================================================= */
.preset-styles .elementor-widget-image,
.preset-styles .e-con.e-child .elementor-widget-heading{
  animation: fpgFadeUp .6s ease both !important;
}

.preset-styles .e-con.e-child:nth-child(1) .elementor-widget-image{ animation-delay: .05s !important; }
.preset-styles .e-con.e-child:nth-child(2) .elementor-widget-image{ animation-delay: .10s !important; }
.preset-styles .e-con.e-child:nth-child(3) .elementor-widget-image{ animation-delay: .15s !important; }
.preset-styles .e-con.e-child:nth-child(4) .elementor-widget-image{ animation-delay: .20s !important; }

@keyframes fpgFadeUp{
  from{ opacity:0; transform: translateY(12px); }
  to{ opacity:1; transform: translateY(0); }
}

/* responsive spacing fix */
@media (max-width: 767px){
  .preset-styles{ padding: 0 0 !important; }
  .preset-styles .elementor-widget-image img{ width: min(360px, 100%) !important; }
}

/* =========================================================
   PRESET STYLES – PERFECT THUMBNAIL SIZE (CONSISTENT)
   ========================================================= */

/* center image */
.preset-styles .elementor-widget-image .elementor-widget-container{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
}

/* uniform thumbnail box */
.preset-styles .elementor-widget-image{
  height: 220px !important;   /* 🔥 visual thumbnail area */
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* image scaling */
.preset-styles .elementor-widget-image img{
  max-width: 280px !important;   /* 🔥 thumbnail size */
  max-height: 220px !important;
  width:auto !important;
  height:auto !important;
  object-fit: contain !important;
  margin:0 auto !important;

  transition: transform .25s ease !important;
}

/* smooth hover */
.preset-styles .elementor-widget-image:hover img{
  transform: scale(1.05) !important;
}

/*/////////////////Innerpage Header Banner/////////////////*/

/* ===========================
   Flexi Inner Banner (Light)
   Updates:
   - NO rounded corners on banner box
   - remove font-family + font-size from description
   - add top padding so nav never overlaps
   - blobs: fade in/out + position drift (randomized per blob) + more blobs
   =========================== */

.fpgp-banner{
  --pink:#AF0E9D;
  --blue:#120C7A;
  --text:#0b1220;
  --muted:rgba(11,18,32,.74);

  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#fff;

  /* ✅ removed rounded corners */
  border-radius:0;

  /* ✅ extra top padding to avoid nav overlap */
  padding:120px 22px 56px;
}

/* Center content like SaaS hero */
.fpgp-wrap{
  position:relative;
  z-index:2;
  width:min(980px, 100%);
  margin:0 auto;
  text-align:center;
}

/* pill */
.fpgp-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:9px 18px;
  border-radius:999px;
  background:rgba(18,12,122,.05);
  border:1px solid rgba(18,12,122,.10);
  color:rgba(11,18,32,.80);
  font:600 13px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing:.2px;
  box-shadow:0 10px 30px rgba(18,12,122,.06);
  animation:fpgpFloat 6.5s ease-in-out infinite;
}

.fpgp-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--pink),var(--blue));
  box-shadow:0 0 0 6px rgba(175,14,157,.10);
}

/* title */
.fpgp-title{
  margin:18px 0 14px;
  color:var(--text);
  /*font:800 54px/1.08 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;*/
  letter-spacing:-.02em;
}

.fpgp-accent{
  background:linear-gradient(90deg,var(--pink),var(--blue));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ✅ description: remove font-family + font-size (inherits theme typography) */
.fpgp-desc{
  margin:0 auto;
  max-width:860px;
  color:var(--muted);
  line-height:1.65;
  /*font-weight:500;*/
}

.fpgp-desc + .fpgp-desc{
  margin-top: 20px;
}

/* Background FX */
.fpgp-bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}

/* Blobs (fade in/out + drift; each blob has its own duration/delay for randomness) */
.fpgp-blob{
  position:absolute;
  border-radius:50%;
  filter:blur(120px);
  transform:translate3d(0,0,0);
  will-change:transform, opacity;
  opacity:.0;
}

/* Blob placements + sizes */
.fpgp-blob.b1{ width:560px; height:560px; left:-220px; top:-220px; background:var(--pink); }
.fpgp-blob.b2{ width:600px; height:600px; right:-260px; bottom:-260px; background:var(--blue); }
.fpgp-blob.b3{ width:460px; height:460px; left:56%; top:40%; background:linear-gradient(135deg,var(--pink),var(--blue)); opacity:.0; }
.fpgp-blob.b4{ width:380px; height:380px; left:12%; top:55%; background:var(--blue); }
.fpgp-blob.b5{ width:420px; height:420px; right:10%; top:18%; background:var(--pink); }
.fpgp-blob.b6{ width:340px; height:340px; left:68%; bottom:8%; background:linear-gradient(135deg,var(--blue),var(--pink)); }

/* ✅ Randomized animation per blob */
.fpgp-blob.b1{ animation:fpgpBlobA 14s ease-in-out infinite; opacity:.30; }
.fpgp-blob.b2{ animation:fpgpBlobB 16s ease-in-out infinite; opacity:.26; }
.fpgp-blob.b3{ animation:fpgpBlobC 18s ease-in-out infinite; opacity:.18; }
.fpgp-blob.b4{ animation:fpgpBlobD 15s ease-in-out infinite; opacity:.16; }
.fpgp-blob.b5{ animation:fpgpBlobE 17s ease-in-out infinite; opacity:.14; }
.fpgp-blob.b6{ animation:fpgpBlobF 19s ease-in-out infinite; opacity:.12; }

/* Subtle grid overlay */
/*.fpgp-grid{*/
/*  position:absolute;*/
/*  inset:-1px;*/
/*  opacity:.42;*/
/*  background-image:*/
/*    linear-gradient(to right, rgba(18,12,122,.07) 1px, transparent 1px),*/
/*    linear-gradient(to bottom, rgba(18,12,122,.07) 1px, transparent 1px);*/
/*  background-size:56px 56px;*/
/*  mask-image: radial-gradient(circle at 50% 35%, rgba(0,0,0,1) 0%, rgba(0,0,0,.85) 40%, rgba(0,0,0,0) 78%);*/
/*}*/

/* Soft noise */
/*.fpgp-noise{*/
/*  position:absolute;*/
/*  inset:0;*/
/*  opacity:.05;*/
/*  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");*/
/*  background-size:180px 180px;*/
/*}*/

.fpgp-grid{
  position:absolute;
  inset:0;

  /* stronger visibility */
  opacity:.28;

  background-image:
    linear-gradient(to right, rgba(18,12,122,.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(18,12,122,.12) 1px, transparent 1px);

  /* same spacing as your reference */
  background-size: 64px 64px;

  /* smooth fade from center */
  mask-image: radial-gradient(circle at 50% 38%,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,.92) 35%,
    rgba(0,0,0,.55) 60%,
    rgba(0,0,0,0) 85%);
}

/* Pill gentle float */
@keyframes fpgpFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
}

/* ✅ Blob animations: fade in/out + position change */
@keyframes fpgpBlobA{
  0%   { transform:translate3d(0,0,0) scale(1); opacity:.05; }
  18%  { opacity:.32; }
  50%  { transform:translate3d(34px,-26px,0) scale(1.06); opacity:.22; }
  78%  { opacity:.30; }
  100% { transform:translate3d(0,0,0) scale(1); opacity:.06; }
}

@keyframes fpgpBlobB{
  0%   { transform:translate3d(0,0,0) scale(1.02); opacity:.04; }
  22%  { opacity:.26; }
  52%  { transform:translate3d(-42px,28px,0) scale(1.07); opacity:.18; }
  80%  { opacity:.24; }
  100% { transform:translate3d(0,0,0) scale(1.02); opacity:.05; }
}

@keyframes fpgpBlobC{
  0%   { transform:translate3d(0,0,0) scale(1); opacity:.02; }
  20%  { opacity:.18; }
  48%  { transform:translate3d(22px,20px,0) scale(1.10); opacity:.12; }
  74%  { opacity:.16; }
  100% { transform:translate3d(0,0,0) scale(1); opacity:.03; }
}

@keyframes fpgpBlobD{
  0%   { transform:translate3d(0,0,0) scale(1.00); opacity:.02; }
  16%  { opacity:.16; }
  50%  { transform:translate3d(-24px,-22px,0) scale(1.08); opacity:.10; }
  82%  { opacity:.15; }
  100% { transform:translate3d(0,0,0) scale(1.00); opacity:.03; }
}

@keyframes fpgpBlobE{
  0%   { transform:translate3d(0,0,0) scale(1.00); opacity:.02; }
  18%  { opacity:.14; }
  55%  { transform:translate3d(30px,-18px,0) scale(1.09); opacity:.09; }
  84%  { opacity:.13; }
  100% { transform:translate3d(0,0,0) scale(1.00); opacity:.03; }
}

@keyframes fpgpBlobF{
  0%   { transform:translate3d(0,0,0) scale(1.00); opacity:.02; }
  24%  { opacity:.12; }
  52%  { transform:translate3d(-18px,26px,0) scale(1.10); opacity:.08; }
  78%  { opacity:.11; }
  100% { transform:translate3d(0,0,0) scale(1.00); opacity:.03; }
}

/* Responsive */
@media (max-width:1024px){
  .fpgp-banner{ padding:105px 18px 64px; }
  .fpgp-title{ font-size:40px; }
}

@media (max-width:767px){
  .fpgp-banner{ padding:96px 16px 52px; }
  .fpgp-title{ font-size:30px; }
  .fpgp-blob{ filter:blur(110px); }
  .fpgp-grid{ background-size:46px 46px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .fpgp-blob, .fpgp-pill{ animation:none !important; opacity:.14 !important; }
}

/* ===========================
   RESPONSIVE ONLY (DO NOT TOUCH DESKTOP)
   Paste at bottom of your <style>
   =========================== */

/* 1024 and below */
@media (max-width:1024px){
  .fpgp-banner{
    /* keep nav safe + better breathing */
    padding:110px 18px 64px !important;
  }

  .fpgp-wrap{
    width:min(920px, 100%) !important;
  }

  .fpgp-title{
    font-size:40px !important;
    line-height:1.12 !important;
  }

  .fpgp-desc{
    max-width:760px !important;
  }

  /* soften + slightly reduce blob sizes for tablet */
  .fpgp-blob{
    filter:blur(110px) !important;
  }

  .fpgp-blob.b1{ width:520px !important; height:520px !important; left:-220px !important; top:-220px !important; }
  .fpgp-blob.b2{ width:540px !important; height:540px !important; right:-240px !important; bottom:-240px !important; }
  .fpgp-blob.b3{ width:420px !important; height:420px !important; left:52% !important; top:44% !important; }
  .fpgp-blob.b4{ width:340px !important; height:340px !important; left:6% !important; top:58% !important; }
  .fpgp-blob.b5{ width:380px !important; height:380px !important; right:4% !important; top:10% !important; }
  .fpgp-blob.b6{ width:320px !important; height:320px !important; left:64% !important; bottom:10% !important; }

  /* grid spacing a bit tighter */
  .fpgp-grid{
    background-size:56px 56px !important;
    opacity:.30 !important;
  }
}

/* 767 and below (mobile) */
@media (max-width:767px){
  .fpgp-banner{
    padding:92px 14px 50px !important;
  }

  .fpgp-pill{
    padding:8px 14px !important;
    font-size:12px !important;
    gap:8px !important;
  }

  .fpgp-title{
    font-size:30px !important;
    line-height:1.12 !important;
    letter-spacing:-.01em !important;
  }

  .fpgp-desc{
    max-width:620px !important;
    line-height:1.75 !important;
  }

  /* keep blobs visible but not overpowering on small screens */
  .fpgp-blob{
    filter:blur(105px) !important;
  }

  /* reposition blobs for mobile center focus */
  .fpgp-blob.b1{ width:420px !important; height:420px !important; left:-220px !important; top:-240px !important; opacity:.22 !important; }
  .fpgp-blob.b2{ width:460px !important; height:460px !important; right:-240px !important; bottom:-260px !important; opacity:.20 !important; }
  .fpgp-blob.b3{ width:320px !important; height:320px !important; left:44% !important; top:52% !important; opacity:.14 !important; }
  .fpgp-blob.b4{ width:280px !important; height:280px !important; left:-60px !important; top:58% !important; opacity:.12 !important; }
  .fpgp-blob.b5{ width:300px !important; height:300px !important; right:-90px !important; top:6% !important; opacity:.12 !important; }
  .fpgp-blob.b6{ width:260px !important; height:260px !important; left:58% !important; bottom:8% !important; opacity:.10 !important; }

  /* grid: smaller squares like your sample + still visible */
  .fpgp-grid{
    background-size:46px 46px !important;
    opacity:.30 !important;
    mask-image: radial-gradient(circle at 50% 40%,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,.90) 38%,
      rgba(0,0,0,.52) 62%,
      rgba(0,0,0,0) 90%) !important;
  }
}

/* 480 and below (small phones) */
@media (max-width:480px){
  .fpgp-banner{
    padding:86px 12px 44px !important;
  }

  .fpgp-title{
    font-size:26px !important;
  }

  .fpgp-desc{
    line-height:1.8 !important;
  }

  .fpgp-pill{
    max-width:100% !important;
    white-space:normal !important;
    text-align:center !important;
  }

  /* reduce blob dominance */
  .fpgp-blob{
    filter:blur(100px) !important;
  }

  .fpgp-blob.b1{ width:380px !important; height:380px !important; }
  .fpgp-blob.b2{ width:400px !important; height:400px !important; }
  .fpgp-blob.b3{ width:280px !important; height:280px !important; }
}

/* Prevent accidental horizontal scroll on mobile */
@media (max-width:767px){
  .fpgp-banner,
  .fpgp-bg{
    overflow:hidden !important;
  }
  .fpgp-title br{
      display: none;
  }
}



.woocommerce-account .woocommerce{
  padding: 70px 0;
}


@media (max-width:1200px){
  .woocommerce-account .woocommerce{
    padding: 50px 0;
  }
}