/* ===================================================================
   Affiracle Pages – Shared Design System
   Used by: index.html, merchants.html, affiliates.html, influencers.html,
            service_providers.html
   =================================================================== */

/* -- Typography override for Hebrew -- */
.hp-hero h1,.hp-hero p,.hp-section h2,.hp-section h4,.hp-section p,
.hp-faq-q,.hp-faq-a p,.hp-chooser-q,.hp-chooser-card,.hp-badge-label,
.hp-btn,.hp-chooser-label,
.ap-hero h1,.ap-hero p,.ap-section h2,.ap-section h4,.ap-section p,
.ap-faq-q,.ap-faq-a p,.ap-btn,
.sp-hero h1,.sp-hero h2,.sp-hero h3,.sp-hero h4,
.sp-section h1,.sp-section h2,.sp-section h3,.sp-section h4,
.sp-cta-section h1,.sp-cta-section h2,.sp-cta-section h3,
.sp-funnel-card h4,.sp-step h4,.sp-feature h4,.sp-usecase h4,
.sp-section-title h2,.sp-calc-card label,.sp-reg-card h3 {
  font-family: "Open Sans", sans-serif !important;
}


/* ===================================================================
   A)  SHARED HERO  –  used by .hp-hero, .ap-hero
   =================================================================== */
.hp-hero,.ap-hero{position:relative;overflow:hidden;min-height:100vh;display:flex;align-items:center;background:#0a1628}
.hp-hero::before,.ap-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 20% 50%,rgba(8,106,216,.25) 0%,transparent 60%),radial-gradient(circle at 80% 30%,rgba(5,219,207,.15) 0%,transparent 50%)}
.hp-hero-grid,.ap-hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:60px 60px}
.hp-hero .container,.ap-hero .container{position:relative;z-index:2}
.hp-hero h1,.ap-hero h1{font-size:3.4rem;font-weight:800;color:#fff;line-height:1.25;margin-bottom:20px}
.hp-hero h1 span,.ap-hero h1 span{background:linear-gradient(90deg,#05dbcf,#086AD8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hp-sub,.ap-sub{font-size:1.2rem;color:rgba(255,255,255,.7);max-width:560px;line-height:1.8;margin-bottom:32px}

/* Particles */
.hp-particle,.ap-particle{position:absolute;border-radius:50%;animation:hp-float 6s ease-in-out infinite;z-index:1}
@keyframes hp-float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-20px) scale(1.1)}}

/* Hero visual (glow orbs + image) */
.hp-hero-visual,.ap-hero-visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:400px}
.hp-glow-orb,.ap-glow-orb{position:absolute;border-radius:50%;filter:blur(100px);opacity:.35}
.hp-glow-orb.orb1,.ap-glow-orb.orb1{width:300px;height:300px;background:#05dbcf;top:-20px;right:10%}
.hp-glow-orb.orb2,.ap-glow-orb.orb2{width:280px;height:280px;background:#086AD8;bottom:-20px;left:10%}
.hp-hero-visual img,.ap-hero-visual img{position:relative;z-index:2;max-width:90%;border-radius:20px}

/* CTA row in hero */
.hp-cta-row,.ap-cta-row{display:flex;gap:16px;flex-wrap:wrap}


/* ===================================================================
   B)  HOMEPAGE CHOOSER  –  hp-chooser-*   (index.html only)
   =================================================================== */
.hp-chooser{margin-top:10px}
.hp-chooser-q{font-size:1rem;color:rgba(255,255,255,.5);margin-bottom:18px;font-weight:500;letter-spacing:.3px}
.hp-chooser-groups{display:flex;gap:0;align-items:flex-start}
.hp-chooser-group{display:flex;flex-direction:column;gap:10px;flex:1}
.hp-chooser-label{display:block;font-size:.8rem;font-weight:600;color:rgba(255,255,255,.4);margin-bottom:4px;text-transform:uppercase;letter-spacing:.8px}
.hp-chooser-card{display:flex;align-items:center;gap:12px;padding:14px 20px;background:rgba(255,255,255,.07);backdrop-filter:blur(12px);border-radius:12px;color:#fff;font-size:.95rem;font-weight:600;border:1px solid rgba(255,255,255,.1);transition:.3s;text-decoration:none}
.hp-chooser-card:hover{border-color:#05dbcf;background:rgba(5,219,207,.1);transform:translateY(-3px);color:#fff;text-decoration:none;box-shadow:0 6px 20px rgba(5,219,207,.15)}
.hp-chooser-card i{font-size:18px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:rgba(255,255,255,.1);color:#05dbcf;flex-shrink:0;transition:.3s}
.hp-chooser-card:hover i{background:#086AD8;color:#fff}
.hp-chooser-divider{display:flex;align-items:center;justify-content:center;padding:30px 18px 0}
.hp-chooser-divider span{font-size:.8rem;font-weight:500;color:rgba(255,255,255,.3)}


/* ===================================================================
   C)  BADGES  –  hp-badge, ap-badge
   =================================================================== */
.hp-badges,.ap-badges{display:flex;gap:24px;margin-top:40px;flex-wrap:wrap}
.hp-badge,.ap-badge{background:rgba(255,255,255,.06);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:18px 24px;text-align:center;min-width:120px}
.hp-badge-num,.ap-badge-num{display:block;font-size:1.8rem;font-weight:800;background:linear-gradient(90deg,#05dbcf,#086AD8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hp-badge-label,.ap-badge-label{font-size:.8rem;color:rgba(255,255,255,.55);margin-top:4px}


/* ===================================================================
   D)  SECTIONS  –  hp-section, ap-section
   =================================================================== */
.hp-section,.ap-section{padding:90px 0}
.hp-section-light,.ap-section-light{background:#f7f9fc}
.hp-section-dark,.ap-section-dark{background:#0d1b2e;color:#fff}
.hp-section-white,.ap-section-white{background:#fff}

.hp-section-title,.ap-section-title{text-align:center;margin-bottom:50px}
.hp-section-title h2,.ap-section-title h2{font-size:2.2rem;font-weight:800;margin-bottom:14px}
.hp-section-title h2 span,.ap-section-title h2 span{color:#086AD8}

.hp-section-dark .hp-section-title h2,.ap-section-dark .ap-section-title h2{color:#fff}
.hp-section-dark .hp-section-title h2 span,.ap-section-dark .ap-section-title h2 span{background:linear-gradient(90deg,#05dbcf,#086AD8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hp-section-title p,.ap-section-title p{font-size:1.05rem;color:#6b7280;max-width:620px;margin:0 auto;line-height:1.7}
.hp-section-dark .hp-section-title p,.ap-section-dark .ap-section-title p{color:rgba(255,255,255,.6)}


/* ===================================================================
   E)  STEP CARDS  –  hp-steps / hp-step
   =================================================================== */
.hp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.hp-step{background:#fff;border-radius:20px;padding:28px 24px;box-shadow:0 4px 30px rgba(0,0,0,.06);transition:.35s;text-align:center;border:1px solid transparent;overflow:hidden}
.hp-step:hover{transform:translateY(-6px);box-shadow:0 10px 35px rgba(8,106,216,.1);border-color:rgba(5,219,207,.2)}
.hp-step img{width:100%;border-radius:12px;margin-bottom:16px}
.hp-step h4{font-size:1.1rem;font-weight:700;color:#1e293b;margin-bottom:10px}
.hp-step p{font-size:.9rem;color:#6b7280;line-height:1.65;margin:0}


/* ===================================================================
   F)  FEATURE CARDS  –  hp-features / ap-features
   =================================================================== */
.hp-features,.ap-features{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;overflow:hidden}
.hp-feature,.ap-feature{min-width:0;word-break:break-word;border-radius:20px;padding:32px 24px;transition:.35s;border:1px solid transparent}

/* dark context */
.hp-section-dark .hp-feature,.ap-section-dark .ap-feature{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}
.hp-section-dark .hp-feature:hover,.ap-section-dark .ap-feature:hover{border-color:#05dbcf;background:rgba(5,219,207,.06);transform:translateY(-4px)}

/* light / white context */
.hp-section-light .hp-feature,.hp-section-white .hp-feature,
.ap-section-light .ap-feature,.ap-section-white .ap-feature{background:#fff;box-shadow:0 2px 20px rgba(0,0,0,.05)}
.hp-section-light .hp-feature:hover,.hp-section-white .hp-feature:hover,
.ap-section-light .ap-feature:hover,.ap-section-white .ap-feature:hover{border-color:#05dbcf;transform:translateY(-6px);box-shadow:0 10px 35px rgba(5,219,207,.1)}

/* feature icons */
.hp-feature-icon,.ap-feature-icon{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:#fff;margin-bottom:18px}
.hp-feature-icon.blue,.ap-feature-icon.blue{background:linear-gradient(135deg,#086AD8,#4f8fef)}
.hp-feature-icon.teal,.ap-feature-icon.teal{background:linear-gradient(135deg,#05dbcf,#0ac5b8)}
.hp-feature-icon.amber,.ap-feature-icon.amber{background:linear-gradient(135deg,#f59e0b,#fbbf24)}
.hp-feature-icon.rose,.ap-feature-icon.rose{background:linear-gradient(135deg,#ef4444,#f87171)}
.hp-feature-icon.purple,.ap-feature-icon.purple{background:linear-gradient(135deg,#8b5cf6,#a78bfa)}
.hp-feature-icon.emerald,.ap-feature-icon.emerald{background:linear-gradient(135deg,#10b981,#34d399)}
.hp-feature-icon.sky,.ap-feature-icon.sky{background:linear-gradient(135deg,#0ea5e9,#38bdf8)}
.hp-feature-icon.orange,.ap-feature-icon.orange{background:linear-gradient(135deg,#f97316,#fb923c)}
.hp-feature-icon.pink,.ap-feature-icon.pink{background:linear-gradient(135deg,#ec4899,#f472b6)}

/* feature text */
.hp-feature h4,.ap-feature h4{font-size:1.05rem;font-weight:700;margin-bottom:8px}
.hp-section-dark .hp-feature h4,.ap-section-dark .ap-feature h4{color:#fff}
.hp-section-light .hp-feature h4,.hp-section-white .hp-feature h4,
.ap-section-light .ap-feature h4,.ap-section-white .ap-feature h4{color:#1e293b}
.hp-feature p,.ap-feature p{font-size:.9rem;line-height:1.65;margin:0}
.hp-section-dark .hp-feature p,.ap-section-dark .ap-feature p{color:rgba(255,255,255,.55)}
.hp-section-light .hp-feature p,.hp-section-white .hp-feature p,
.ap-section-light .ap-feature p,.ap-section-white .ap-feature p{color:#6b7280}


/* ===================================================================
   G)  CTA BUTTONS  –  hp-btn, ap-btn
   =================================================================== */
.hp-btn,.ap-btn{padding:14px 40px;border:none;border-radius:50px;font-size:1.05rem;font-weight:700;cursor:pointer;transition:.3s;text-decoration:none;display:inline-block}
.hp-btn.primary,.ap-btn.primary{background:linear-gradient(90deg,#05dbcf,#086AD8);color:#fff;box-shadow:0 4px 25px rgba(5,219,207,.35)}
.hp-btn.primary:hover,.ap-btn.primary:hover{box-shadow:0 6px 35px rgba(5,219,207,.55);transform:translateY(-2px);color:#fff;text-decoration:none}
.hp-btn.outline,.ap-btn.outline{background:transparent;border:2px solid rgba(255,255,255,.3);color:#fff}
.hp-btn.outline:hover,.ap-btn.outline:hover{border-color:#05dbcf;color:#05dbcf}
.hp-btn-row,.ap-btn-row{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:30px}


/* ===================================================================
   H)  IMAGE + TEXT LAYOUT
   =================================================================== */
.hp-img-text,.ap-img-text{display:flex;align-items:center;gap:40px}
.hp-img-text img,.ap-img-text img{max-width:48%;border-radius:16px;box-shadow:0 8px 40px rgba(0,0,0,.08)}
.hp-img-text .hp-text-side,.ap-img-text .ap-text-side{flex:1}
.hp-img-text .hp-text-side h2,.ap-img-text .ap-text-side h2{font-size:2rem;font-weight:800;margin-bottom:16px}
.hp-img-text .hp-text-side p,.ap-img-text .ap-text-side p{font-size:1rem;color:#6b7280;line-height:1.7;margin-bottom:12px}


/* ===================================================================
   I)  FAQ ACCORDION  –  hp-faq, ap-faq
   =================================================================== */
.hp-faq-list,.ap-faq-list{max-width:800px;margin:0 auto}
.hp-faq-item,.ap-faq-item{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:16px;margin-bottom:12px;overflow:hidden;transition:.3s}
.hp-faq-item:hover,.ap-faq-item:hover{border-color:rgba(5,219,207,.3)}
.hp-faq-q,.ap-faq-q{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;cursor:pointer;color:#fff;font-weight:600;font-size:1.05rem;margin:0}
.hp-faq-q i,.ap-faq-q i{color:#05dbcf;transition:.3s;font-size:.9rem}
.hp-faq-item.active .hp-faq-q i,.ap-faq-item.active .ap-faq-q i{transform:rotate(180deg)}
.hp-faq-a,.ap-faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease,padding .35s ease;padding:0 24px}
.hp-faq-item.active .hp-faq-a,.ap-faq-item.active .ap-faq-a{max-height:300px;padding:0 24px 20px}
.hp-faq-a p,.ap-faq-a p{color:rgba(255,255,255,.6);font-size:.93rem;line-height:1.7;margin:0}


/* ===================================================================
   J)  TESTIMONIALS  –  ap-testimonials
   =================================================================== */
.ap-testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.ap-testimonial{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:32px 24px;transition:.35s}
.ap-testimonial:hover{border-color:rgba(5,219,207,.3);transform:translateY(-4px)}
.ap-testimonial p{color:rgba(255,255,255,.7);font-size:.93rem;line-height:1.65;font-style:italic;margin-bottom:16px}
.ap-testimonial .ap-testimonial-name{color:#05dbcf;font-weight:700;font-size:.95rem}
.ap-testimonial .ap-testimonial-name i{margin-left:6px}


/* ===================================================================
   K)  CALCULATOR  –  ap-calc
   =================================================================== */
.ap-calc-card{max-width:720px;margin:0 auto;background:#fff;border-radius:24px;padding:48px;box-shadow:0 8px 40px rgba(0,0,0,.08)}
.ap-calc-card h2{font-size:1.8rem;font-weight:800;color:#1e293b;margin-bottom:8px;text-align:center}
.ap-calc-card h4{font-size:1rem;color:#6b7280;text-align:center;margin-bottom:8px;font-weight:400}
.ap-calc-card label{display:block;font-size:1rem;font-weight:600;color:#1e293b;margin-bottom:8px;margin-top:20px}
.ap-calc-card .slider{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:4px;background:#e5e7eb;outline:none;margin-bottom:4px}
.ap-calc-card .slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#05dbcf,#086AD8);cursor:pointer;box-shadow:0 2px 8px rgba(5,219,207,.4)}
.ap-calc-results{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
.ap-calc-result{background:#f0f9ff;border-radius:16px;padding:20px;text-align:center}
.ap-calc-result.highlight{background:linear-gradient(135deg,#05dbcf,#086AD8);color:#fff}
.ap-calc-result .ap-calc-val{display:block;font-size:1.6rem;font-weight:800}
.ap-calc-result .ap-calc-lbl{font-size:.85rem;margin-top:4px;opacity:.8}


/* ===================================================================
   L)  REGISTRATION FORM  –  ap-reg-card  (replicates sp-reg-card)
   =================================================================== */
.ap-reg-card{background:rgba(255,255,255,.07);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:40px;max-width:480px;margin:0 auto}
.ap-reg-card h3{color:#fff;font-size:1.3rem;font-weight:700;text-align:center;margin-bottom:24px}
.ap-reg-card .form-control{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:#fff;border-radius:12px;padding:12px 16px;font-size:.95rem}
.ap-reg-card .form-control::placeholder{color:rgba(255,255,255,.45)}
.ap-reg-card .form-control:focus{border-color:#05dbcf;box-shadow:0 0 0 3px rgba(5,219,207,.2);background:rgba(255,255,255,.1)}
.ap-reg-card .form-check-label{color:rgba(255,255,255,.7);font-size:.85rem}
.ap-reg-card .form-check-label a{color:#05dbcf}
.ap-reg-card .btn-submit{width:100%;padding:14px;border:none;border-radius:12px;background:linear-gradient(90deg,#05dbcf,#086AD8);color:#fff;font-size:1.05rem;font-weight:700;cursor:pointer;transition:.3s}
.ap-reg-card .btn-submit:hover{box-shadow:0 6px 25px rgba(5,219,207,.4);transform:translateY(-2px)}
.ap-reg-card .ap-login-link{text-align:center;margin-top:16px}
.ap-reg-card .ap-login-link a{color:rgba(255,255,255,.6);font-size:.85rem}
.ap-reg-card .ap-login-link a:hover{color:#05dbcf}
.ap-reg-card .grecaptcha-badge{visibility:hidden !important;position:absolute !important}


/* ===================================================================
   M)  LANGUAGE SWITCHER (in navbar)
   =================================================================== */
/* Desktop: pill-style lang button inside nav */
.fria-nav .nav-lang-switch a.nav-link{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 16px !important;margin:18px 8px !important;
  border-radius:20px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  font-size:13px;font-weight:600;
  color:rgba(255,255,255,.8) !important;
  transition:background .25s,color .25s,border-color .25s;
}
.fria-nav .nav-lang-switch a.nav-link:hover{
  background:rgba(5,219,207,.15);
  color:#05dbcf !important;
  border-color:#05dbcf;
}

/* Mobile: show language switcher inside the hamburger menu */
@media(max-width:991px){
  .mean-container .mean-nav ul li.nav-lang-switch{
    border-top:1px solid rgba(255,255,255,.15);
  }
  .mean-container .mean-nav ul li.nav-lang-switch > a{
    display:block !important;
    float:left !important;
    width:90% !important;
    padding:1em 5% !important;
    margin:0 !important;
    background:transparent !important;
    border:none !important;
    border-radius:0 !important;
    font-size:14px !important;
    font-weight:600 !important;
    color:rgba(255,255,255,.85) !important;
  }
  html[dir="rtl"] .mean-container .mean-nav ul li.nav-lang-switch > a{
    float:right !important;
  }
  .mean-container .mean-nav ul li.nav-lang-switch > a:hover{
    background:rgba(5,219,207,.1) !important;
    color:#05dbcf !important;
  }
}


/* ===================================================================
   N)  RESPONSIVE
   =================================================================== */
@media(max-width:991px){
    .hp-hero,.ap-hero{min-height:auto;padding:120px 0 60px}
    .hp-hero h1,.ap-hero h1{font-size:2.4rem}
    .hp-hero-visual,.ap-hero-visual{margin-top:40px;min-height:280px}
    .hp-steps{grid-template-columns:repeat(2,1fr)}
    .hp-features,.ap-features{grid-template-columns:repeat(2,1fr)}
    .hp-img-text,.ap-img-text{flex-direction:column;text-align:center}
    .hp-img-text img,.ap-img-text img{max-width:80%;margin:0 auto 24px}
    .ap-testimonials{grid-template-columns:1fr}
    .ap-calc-results{grid-template-columns:1fr}
}
@media(max-width:575px){
    .hp-hero,.ap-hero{padding:100px 0 50px}
    .hp-hero h1,.ap-hero h1{font-size:1.9rem}
    .hp-sub,.ap-sub{font-size:1rem}
    .hp-chooser-groups{flex-direction:column;gap:10px}
    .hp-chooser-group{flex-direction:row;flex-wrap:wrap;width:100%}
    .hp-chooser-label{text-align:center;width:100%}
    .hp-chooser-card{flex:1;justify-content:center;padding:12px 10px;font-size:.85rem}
    .hp-chooser-card i{width:30px;height:30px;font-size:15px}
    .hp-chooser-divider{padding:5px 0}
    .hp-badges,.ap-badges{gap:14px}
    .hp-badge,.ap-badge{padding:14px 18px;min-width:90px}
    .hp-badge-num,.ap-badge-num{font-size:1.4rem}
    .hp-steps{grid-template-columns:1fr}
    .hp-features,.ap-features{grid-template-columns:1fr}
    .hp-section,.ap-section{padding:60px 0}
    .hp-section-title h2,.ap-section-title h2{font-size:1.7rem}
    .hp-btn,.ap-btn{padding:12px 30px;font-size:.95rem}
    .hp-img-text .hp-text-side h2,.ap-img-text .ap-text-side h2{font-size:1.5rem}
    .ap-testimonials{grid-template-columns:1fr}
}

/* =============================================
   O. Service Providers (sp-) Page Styles
   ============================================= */

/* -- Force Open Sans on headings (Catamaran doesn't support Hebrew) -- */
.sp-hero h1,.sp-hero h2,.sp-hero h3,.sp-hero h4,
.sp-section h1,.sp-section h2,.sp-section h3,.sp-section h4,
.sp-cta-section h1,.sp-cta-section h2,.sp-cta-section h3,
.sp-funnel-card h4,.sp-step h4,.sp-feature h4,.sp-usecase h4,
.sp-section-title h2,.sp-calc-card label,.sp-reg-card h3{
  font-family: "Open Sans", sans-serif !important;
}

/* -- Hero -- */
.sp-hero{position:relative;overflow:hidden;min-height:100vh;display:flex;align-items:center;background:#0a1628}
.sp-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 20% 50%,rgba(8,106,216,.25) 0%,transparent 60%),radial-gradient(circle at 80% 30%,rgba(5,219,207,.15) 0%,transparent 50%)}
.sp-hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:60px 60px}
.sp-hero .container{position:relative;z-index:2}
.sp-hero h1{font-size:3.2rem;font-weight:800;color:#fff;line-height:1.25;margin-bottom:24px}
.sp-hero h1 span{background:linear-gradient(90deg,#05dbcf,#086AD8);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.sp-hero .sp-sub{font-size:1.25rem;color:rgba(255,255,255,.75);max-width:560px;line-height:1.8;margin-bottom:36px}
.sp-hero .sp-cta-row{display:flex;gap:16px;flex-wrap:wrap}
.sp-hero .sp-cta-row .btn-glow{padding:14px 40px;border:none;border-radius:50px;font-size:1.05rem;font-weight:700;cursor:pointer;transition:.3s;text-decoration:none;display:inline-block}
.sp-hero .btn-glow.primary{background:linear-gradient(90deg,#05dbcf,#086AD8);color:#fff;box-shadow:0 4px 25px rgba(5,219,207,.35)}
.sp-hero .btn-glow.primary:hover{box-shadow:0 6px 35px rgba(5,219,207,.55);transform:translateY(-2px);color:#fff}
.sp-hero .btn-glow.outline{background:transparent;border:2px solid rgba(255,255,255,.3);color:#fff}
.sp-hero .btn-glow.outline:hover{border-color:#05dbcf;color:#05dbcf}

/* floating stat badges */
.sp-badges{display:flex;gap:24px;margin-top:48px;flex-wrap:wrap}
.sp-badge{background:rgba(255,255,255,.06);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:20px 28px;text-align:center;min-width:130px}
.sp-badge .sp-badge-num{display:block;font-size:2rem;font-weight:800;background:linear-gradient(90deg,#05dbcf,#086AD8);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.sp-badge .sp-badge-label{font-size:.85rem;color:rgba(255,255,255,.6);margin-top:4px}

/* hero right visual */
.sp-hero-visual{position:relative}
.sp-hero-visual .sp-glow-orb{position:absolute;width:340px;height:340px;border-radius:50%;filter:blur(100px);opacity:.35}
.sp-glow-orb.orb1{background:#05dbcf;top:-40px;right:0}
.sp-glow-orb.orb2{background:#086AD8;bottom:-40px;left:20px}
.sp-funnel{position:relative;z-index:2;width:100%;max-width:440px;margin:0 auto}
.sp-funnel-card{background:rgba(255,255,255,.07);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:32px;text-align:center;margin-bottom:16px;transition:.3s}
.sp-funnel-card:hover{transform:translateY(-4px);border-color:rgba(5,219,207,.3)}
.sp-funnel-card i{font-size:2rem;margin-bottom:12px}
.sp-funnel-card h4{color:#fff;font-size:1.1rem;margin-bottom:6px;font-weight:600}
.sp-funnel-card p{color:rgba(255,255,255,.55);font-size:.9rem;margin:0}
.sp-funnel-arrow{text-align:center;color:rgba(5,219,207,.5);font-size:1.5rem;margin:4px 0}

/* -- Section Shared -- */
.sp-section{padding:100px 0}
.sp-section-dark{background:#0d1b2e;color:#fff}
.sp-section-light{background:#f7f9fc}
.sp-section-title{text-align:center;margin-bottom:60px}
.sp-section-title h2{font-size:2.4rem;font-weight:800;color:inherit;margin-bottom:16px}
.sp-section-title h2 span{color:#086AD8}
.sp-section-title p{font-size:1.1rem;color:#6b7280;max-width:640px;margin:0 auto}
.sp-section-dark .sp-section-title p{color:rgba(255,255,255,.6)}

/* -- How It Works -- */
.sp-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;counter-reset:step}
.sp-step{position:relative;background:#fff;border-radius:20px;padding:40px 28px 32px;text-align:center;box-shadow:0 4px 30px rgba(0,0,0,.06);transition:.35s;counter-increment:step}
.sp-step:hover{transform:translateY(-8px);box-shadow:0 12px 40px rgba(8,106,216,.12)}
.sp-step::before{content:counter(step);position:absolute;top:-18px;right:calc(50% - 18px);width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#05dbcf,#086AD8);color:#fff;font-weight:800;font-size:.95rem;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(5,219,207,.3)}
.sp-step i{font-size:2.2rem;color:#086AD8;margin-bottom:16px;display:block}
.sp-step h4{font-size:1.15rem;font-weight:700;margin-bottom:10px;color:#1e293b}
.sp-step p{font-size:.93rem;color:#6b7280;line-height:1.65}
@media(max-width:991px){.sp-steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:575px){.sp-steps{grid-template-columns:1fr}}

/* -- Features Grid -- */
.sp-features{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;overflow:hidden}
.sp-feature{min-width:0;word-break:break-word}
.sp-feature{background:#fff;border-radius:20px;padding:36px 28px;box-shadow:0 2px 20px rgba(0,0,0,.05);transition:.35s;border:1px solid transparent}
.sp-feature:hover{border-color:#05dbcf;transform:translateY(-6px);box-shadow:0 10px 35px rgba(5,219,207,.1)}
.sp-feature-icon{width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;color:#fff;margin-bottom:20px}
.sp-feature-icon.blue{background:linear-gradient(135deg,#086AD8,#4f8fef)}
.sp-feature-icon.teal{background:linear-gradient(135deg,#05dbcf,#0ac5b8)}
.sp-feature-icon.amber{background:linear-gradient(135deg,#f59e0b,#fbbf24)}
.sp-feature-icon.rose{background:linear-gradient(135deg,#ef4444,#f87171)}
.sp-feature-icon.purple{background:linear-gradient(135deg,#8b5cf6,#a78bfa)}
.sp-feature-icon.emerald{background:linear-gradient(135deg,#10b981,#34d399)}
.sp-feature h4{font-size:1.15rem;font-weight:700;margin-bottom:10px;color:#1e293b}
.sp-feature p{font-size:.93rem;color:#6b7280;line-height:1.65;margin:0}
@media(max-width:991px){.sp-features{grid-template-columns:repeat(2,1fr)}}
@media(max-width:575px){.sp-features{grid-template-columns:1fr}}

/* -- Use Cases -- */
.sp-usecases{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.sp-usecase{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:32px 24px;text-align:center;transition:.35s}
.sp-usecase:hover{border-color:#05dbcf;background:rgba(5,219,207,.06);transform:translateY(-4px)}
.sp-usecase i{font-size:2.4rem;margin-bottom:14px;display:block}
.sp-usecase h4{font-size:1.1rem;font-weight:700;color:#fff;margin-bottom:8px}
.sp-usecase p{font-size:.88rem;color:rgba(255,255,255,.55);line-height:1.6;margin:0}
@media(max-width:991px){.sp-usecases{grid-template-columns:repeat(2,1fr)}}
@media(max-width:575px){.sp-usecases{grid-template-columns:1fr}}

/* -- Calculator -- */
.sp-calc-card{max-width:720px;margin:0 auto;background:#fff;border-radius:24px;padding:48px;box-shadow:0 8px 40px rgba(0,0,0,.08)}
.sp-calc-card label{display:block;font-size:1rem;font-weight:600;color:#1e293b;margin-bottom:8px;margin-top:20px}
.sp-calc-card .slider{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:4px;background:#e5e7eb;outline:none;margin-bottom:4px}
.sp-calc-card .slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#05dbcf,#086AD8);cursor:pointer;box-shadow:0 2px 8px rgba(5,219,207,.4)}
.sp-calc-results{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
.sp-calc-result{background:#f0f9ff;border-radius:16px;padding:20px;text-align:center}
.sp-calc-result.highlight{background:linear-gradient(135deg,#05dbcf,#086AD8);color:#fff}
.sp-calc-result .sp-calc-val{display:block;font-size:1.6rem;font-weight:800}
.sp-calc-result .sp-calc-lbl{font-size:.85rem;margin-top:4px;opacity:.8}
@media(max-width:575px){.sp-calc-results{grid-template-columns:1fr}}

/* -- Final CTA -- */
.sp-cta-section{position:relative;padding:100px 0;overflow:hidden;background:#0a1628}
.sp-cta-section::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(5,219,207,.2) 0%,transparent 60%)}
.sp-cta-section .container{position:relative;z-index:2;text-align:center}
.sp-cta-section h2{font-size:2.6rem;font-weight:800;color:#fff;margin-bottom:20px}
.sp-cta-section p{font-size:1.15rem;color:rgba(255,255,255,.7);max-width:560px;margin:0 auto 36px}
.sp-cta-section .btn-glow.primary{padding:16px 48px;font-size:1.1rem}

/* -- Floating Particles -- */
.sp-particle{position:absolute;border-radius:50%;pointer-events:none;animation:sp-float 6s ease-in-out infinite}
@keyframes sp-float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-20px) scale(1.1)}}

/* -- Registration Form -- */
.sp-reg-card{background:rgba(255,255,255,.07);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:40px;max-width:440px;margin:0 auto}
.sp-reg-card h3{color:#fff;font-size:1.3rem;font-weight:700;text-align:center;margin-bottom:24px}
.sp-reg-card .form-control{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:#fff;border-radius:12px;padding:12px 16px;font-size:.95rem}
.sp-reg-card .form-control::placeholder{color:rgba(255,255,255,.45)}
.sp-reg-card .form-control:focus{border-color:#05dbcf;box-shadow:0 0 0 3px rgba(5,219,207,.2);background:rgba(255,255,255,.1)}
.sp-reg-card .form-check-label{color:rgba(255,255,255,.7);font-size:.85rem}
.sp-reg-card .form-check-label a{color:#05dbcf}
.sp-reg-card .btn-submit{width:100%;padding:14px;border:none;border-radius:12px;background:linear-gradient(90deg,#05dbcf,#086AD8);color:#fff;font-size:1.05rem;font-weight:700;cursor:pointer;transition:.3s}
.sp-reg-card .btn-submit:hover{box-shadow:0 6px 25px rgba(5,219,207,.4);transform:translateY(-2px)}
.sp-reg-card .sp-login-link{text-align:center;margin-top:16px}
.sp-reg-card .sp-login-link a{color:rgba(255,255,255,.6);font-size:.85rem}
.sp-reg-card .sp-login-link a:hover{color:#05dbcf}
.sp-reg-card .grecaptcha-badge{visibility:hidden !important;position:absolute !important}

/* =============================================
   P. Site Header / Navbar Override
   ============================================= */

/* Base navbar – persistent dark glass, ensure on top of page content */
.navbar-area{
  background:rgba(10,22,40,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:background .4s,box-shadow .4s;
  position:relative;
  z-index:999;
}

/* Sticky state – denser glass + glow border */
.navbar-area.is-sticky{
  background:rgba(10,22,40,.97) !important;
  backdrop-filter:blur(20px) !important;
  -webkit-backdrop-filter:blur(20px) !important;
  box-shadow:0 4px 30px rgba(0,0,0,.35) !important;
  border-bottom:1px solid rgba(5,219,207,.12);
}

/* Logo – ensure it's bright on dark bg */
.navbar-area .navbar-brand img,
.navbar-area .logo img{
  filter:brightness(0) invert(1);
  transition:filter .3s;
}

/* Nav links – white on dark */
.fria-nav .navbar .navbar-nav .nav-item a{
  color:rgba(255,255,255,.85);
  transition:color .25s;
}
.fria-nav .navbar .navbar-nav .nav-item a:hover,
.fria-nav .navbar .navbar-nav .nav-item a:focus,
.fria-nav .navbar .navbar-nav .nav-item a.active,
.fria-nav .navbar .navbar-nav .nav-item:hover>a,
.fria-nav .navbar .navbar-nav .nav-item.active>a{
  color:#05dbcf;
}
.fria-nav .navbar .navbar-nav .nav-item a i{
  color:inherit;
}

/* Sticky-state links (override old white bg text) */
.navbar-area.is-sticky .fria-nav .navbar .navbar-nav .nav-item a{
  color:rgba(255,255,255,.85);
}
.navbar-area.is-sticky .fria-nav .navbar .navbar-nav .nav-item a:hover,
.navbar-area.is-sticky .fria-nav .navbar .navbar-nav .nav-item a:focus,
.navbar-area.is-sticky .fria-nav .navbar .navbar-nav .nav-item a.active{
  color:#05dbcf;
}

/* Dropdown menus – glassmorphic dark */
.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu{
  background:rgba(13,27,46,.97);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  box-shadow:0 20px 50px rgba(0,0,0,.45);
  padding:12px 8px;
}
.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li a{
  color:rgba(255,255,255,.72);
  border-radius:8px;
  transition:background .2s,color .2s;
}
.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li a:hover,
.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li a:focus,
.fria-nav .navbar .navbar-nav .nav-item .dropdown-menu li a.active{
  color:#05dbcf;
  background:rgba(5,219,207,.08);
  letter-spacing:0;
}

/* Dashboard / CTA button – gradient pill */
.fria-nav .navbar .others-options .default-btn{
  background:linear-gradient(90deg,#05dbcf,#086AD8);
  border-radius:50px;
  color:#fff;
  font-weight:700;
  padding:10px 30px;
  font-size:15px;
  border:none;
  box-shadow:0 4px 18px rgba(5,219,207,.3);
  transition:box-shadow .3s,transform .3s;
}
.fria-nav .navbar .others-options .default-btn:hover{
  box-shadow:0 6px 28px rgba(5,219,207,.55);
  transform:translateY(-2px);
  background:linear-gradient(90deg,#05dbcf,#086AD8);
  color:#fff;
}

/* Sticky CTA – keep same */
.navbar-area.is-sticky .fria-nav .navbar .others-options .default-btn{
  background:linear-gradient(90deg,#05dbcf,#086AD8);
  color:#fff;
}

/* ======================
   Mobile / Meanmenu Overrides (<=991px)
   ====================== */
/* Navbar bg on mobile – override style-he/style.css media query */
@media(max-width:991px){
  .navbar-area{
    background:rgba(10,22,40,.95) !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
  }
}

/* Burger icon bars – white on dark (override .fria-responsive-nav specificity) */
.fria-responsive-nav .mean-container a.meanmenu-reveal span,
.mean-container a.meanmenu-reveal span{
  background:#fff !important;
}
/* Burger icon reveal link color */
.fria-responsive-nav .mean-container a.meanmenu-reveal,
.mean-container a.meanmenu-reveal{
  color:#fff !important;
}

/* Mobile nav panel background – dark, full viewport height */
.mean-container .mean-bar{
  background:rgba(10,22,40,.95) !important;
  border-bottom:1px solid rgba(255,255,255,.06) !important;
}
.mean-container .mean-nav{
  background:transparent !important;
}
/* Apply height + bg to the inner ul that meanmenu toggles */
.mean-container .mean-nav > ul{
  background:rgba(10,22,40,.98) !important;
  min-height:calc(100vh - 55px);
  max-height:calc(100vh - 55px);
  overflow-y:auto;
}

/* Mobile nav links – all levels white on dark */
.mean-container .mean-nav ul li a,
.mean-container .mean-nav ul li li a,
.mean-container .mean-nav ul li li li a{
  color:rgba(255,255,255,.8) !important;
  border-top:1px solid rgba(255,255,255,.06) !important;
}
.mean-container .mean-nav ul li a:hover,
.mean-container .mean-nav ul li li a:hover,
.mean-container .mean-nav ul li li li a:hover{
  background:rgba(5,219,207,.1) !important;
  color:#05dbcf !important;
}
.mean-container .mean-nav ul li a.active{
  color:#05dbcf !important;
}

/* Dropdown submenus inside mean-nav – override Bootstrap white bg */
.mean-container .mean-nav .dropdown-menu{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:0 !important;
}
.mean-container .mean-nav .dropdown-menu li a{
  color:rgba(255,255,255,.8) !important;
  background:transparent !important;
}
.mean-container .mean-nav .dropdown-menu li a:hover{
  background:rgba(5,219,207,.1) !important;
  color:#05dbcf !important;
}

/* Expand/collapse arrow – teal on transparent */
.mean-container .mean-nav ul li a.mean-expand{
  background:transparent !important;
  color:#05dbcf !important;
  border:none !important;
  border-left:1px solid rgba(255,255,255,.06) !important;
}

/* Mobile scrollable nav container */
.fria-responsive-nav .fria-responsive-menu.mean-container .navbar-nav{
  box-shadow:none !important;
  -webkit-box-shadow:none !important;
}

/* Responsive mobile logo – white */
.fria-responsive-nav .logo img{
  filter:brightness(0) invert(1);
}

/* =============================================
   Q. Site Footer Override
   ============================================= */

.footer-section{
  background:#0a1628 !important;
  position:relative;
  overflow:hidden;
}
/* Gradient top edge */
.footer-section::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg,#05dbcf,#086AD8,#05dbcf);
  z-index:1;
}
/* Subtle radial glow */
.footer-section::after{
  content:'';
  position:absolute;
  bottom:-120px;left:50%;
  transform:translateX(-50%);
  width:600px;height:300px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(5,219,207,.08) 0%,transparent 70%);
  pointer-events:none;
}

.footer-section .container{
  position:relative;
  z-index:2;
}

/* Widget headings */
.single-footer-widget .footer-heading h3{
  color:#fff;
  font-family:"Open Sans",sans-serif !important;
  font-size:1.2rem;
  font-weight:700;
  margin-bottom:22px;
  position:relative;
  padding-bottom:12px;
}
.single-footer-widget .footer-heading h3::after{
  content:'';
  position:absolute;
  bottom:0;
  right:0;
  width:36px;
  height:3px;
  border-radius:2px;
  background:linear-gradient(90deg,#05dbcf,#086AD8);
}

/* About paragraph */
.single-footer-widget>p,
.footer-section p{
  color:rgba(255,255,255,.55);
  line-height:1.75;
}

/* Social icons */
.single-footer-widget .footer-social i{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);
  color:#fff;
  transition:all .3s;
}
.single-footer-widget .footer-social i:hover{
  background:linear-gradient(135deg,#05dbcf,#086AD8);
  border-color:transparent;
  box-shadow:0 4px 18px rgba(5,219,207,.35);
  transform:translateY(-3px);
}

/* Quick links */
.single-footer-widget .footer-quick-links li{
  font-weight:500;
}
.single-footer-widget .footer-quick-links li a{
  color:rgba(255,255,255,.6);
  transition:color .25s,padding .25s;
}
.single-footer-widget .footer-quick-links li a:hover{
  color:#05dbcf;
  padding-right:6px;
}

/* Contact info */
.single-footer-widget .footer-info-contact i{
  color:#05dbcf;
}
.single-footer-widget .footer-info-contact h3{
  color:#fff;
  font-size:1rem;
  font-weight:600;
}
.single-footer-widget .footer-info-contact span,
.single-footer-widget .footer-info-contact span a{
  color:rgba(255,255,255,.55);
  transition:color .25s;
}
.single-footer-widget .footer-info-contact span a:hover{
  color:#05dbcf;
}

/* Copyright bar */
.aff-copyright{
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:40px;
  padding-top:24px;
  padding-bottom:8px;
  text-align:center;
}
.aff-copyright p{
  color:rgba(255,255,255,.4);
  font-size:.85rem;
  margin:0;
}
.aff-copyright a{
  color:#05dbcf;
  text-decoration:none;
}
.aff-copyright a:hover{
  color:#fff;
}

/* LTR Footer heading underline adjustment */
html[lang="en"] .single-footer-widget .footer-heading h3::after{
  right:auto;
  left:0;
}