/* ============================================================
   VITRINE CSS — Vuexy Front-Pages Style + Crimson Tunisia
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@300;400;500;600;700;800;900&display=swap');

*,:before,:after{box-sizing:border-box}
body,html{margin:0;padding:0;font-family:'Public Sans',sans-serif;background:#f8f7fa;scroll-behavior:smooth;overflow-x:hidden}
.vitrine-container{min-height:100vh;padding-top:0}

/* ======== NAVBAR — Vuexy glassmorphism ======== */
.vitrine-nav{
  position:fixed;top:0;left:0;right:0;z-index:1050;
  background:rgba(255,255,255,0.95)!important;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(47,43,61,0.06);
  padding:0.75rem 0!important;
  transition:all 0.2s ease-in-out;
}
.vitrine-nav > .container{display:flex!important;align-items:center!important;flex-direction:row!important;flex-wrap:nowrap!important;max-width:1440px}
.nav-inner{display:flex!important;align-items:center!important;justify-content:space-between!important;width:100%!important;gap:1rem}
.nav-brand{display:inline-flex!important;align-items:center!important;gap:0.625rem;text-decoration:none!important;flex-shrink:0}
.brand-text{font-size:1.125rem;font-weight:700;color:#444050;letter-spacing:-0.3px}
.brand-sub{font-weight:400;color:#97959e}
.nav-links{display:flex;align-items:center;gap:0.25rem}
.nav-link-custom{
  font-weight:500!important;font-size:0.9375rem!important;color:#6d6b77!important;
  padding:0.5rem 1rem!important;transition:all 0.2s;text-decoration:none!important;
  border-radius:0.375rem;
}
.nav-link-custom:hover{color:#C8102E!important;background:rgba(200,16,46,0.04)}
.nav-actions{display:flex;align-items:center;gap:0.625rem;flex-shrink:0}

/* ======== BUTTONS — Vuexy ======== */
.btn-crimson{
  background:linear-gradient(72.47deg,#C8102E 22.16%,#E25B6A 76.47%)!important;
  color:#fff!important;border:none!important;border-radius:0.375rem;
  font-weight:500;padding:0.5rem 1.25rem;font-size:0.9375rem;
  transition:all 0.2s ease-in-out;box-shadow:0 2px 6px rgba(200,16,46,0.3);
}
.btn-crimson:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(200,16,46,0.4);color:#fff!important}
.btn-crimson.btn-lg{padding:0.75rem 2rem!important;font-size:1rem!important;border-radius:0.5rem}
.btn-outline-crimson{
  color:#C8102E!important;border:1px solid #C8102E!important;border-radius:0.375rem;
  font-weight:500;background:transparent!important;padding:0.5rem 1.25rem;font-size:0.9375rem;
  transition:all 0.2s;
}
.btn-outline-crimson:hover{background:#C8102E!important;color:#fff!important;box-shadow:0 2px 6px rgba(200,16,46,0.3)}
.btn-outline-crimson.btn-lg{padding:0.75rem 2rem!important;font-size:1rem!important;border-radius:0.5rem}
.btn-white{background:#fff!important;color:#C8102E!important;border:none!important;border-radius:0.5rem;font-weight:600;padding:0.75rem 2rem!important;font-size:1rem!important;box-shadow:0 0.1875rem 0.75rem rgba(47,43,61,0.14)}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 0.25rem 1.125rem rgba(47,43,61,0.18);color:#9E0C24!important}
.btn-outline-white{background:transparent!important;color:#fff!important;border:1px solid rgba(255,255,255,0.5)!important;border-radius:0.5rem;font-weight:500;padding:0.75rem 2rem!important;font-size:1rem!important}
.btn-outline-white:hover{background:rgba(255,255,255,0.12)!important;border-color:#fff!important}

/* ======== HERO — Vuexy front-page gradient ======== */
.hero-section{
  padding:6.5rem 1.25rem 3rem;position:relative;overflow:hidden;
  background:linear-gradient(180deg,#f8f7fa 0%,#FDF2F3 40%,#f8f7fa 100%);
}
.hero-bg-orbs{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero-bg-orbs::before{
  content:'';position:absolute;top:-15%;left:-5%;width:500px;height:500px;
  background:radial-gradient(circle,rgba(200,16,46,0.06) 0%,transparent 70%);
  border-radius:50%;animation:floatOrb 20s ease-in-out infinite;
}
.hero-bg-orbs::after{
  content:'';position:absolute;bottom:-10%;right:-5%;width:400px;height:400px;
  background:radial-gradient(circle,rgba(40,199,111,0.05) 0%,transparent 70%);
  border-radius:50%;animation:floatOrb 25s ease-in-out infinite reverse;
}
@keyframes floatOrb{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,-30px)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

.hero-pill{
  display:inline-flex;align-items:center;gap:0.5rem;
  background:rgba(200,16,46,0.06);color:#C8102E;
  font-size:0.8125rem;font-weight:500;padding:0.375rem 1rem;
  border-radius:50rem;border:1px solid rgba(200,16,46,0.1);margin-bottom:1rem;
}
.hero-title{font-weight:800;color:#444050;letter-spacing:-1.5px;font-size:2.75rem;line-height:1.15;max-width:700px;margin:0 auto 1rem}
.hero-gradient-text{background:linear-gradient(72.47deg,#C8102E 22.16%,#E25B6A 76.47%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-lead{font-size:1rem;max-width:700px;margin:0 auto 1.5rem;color:#6d6b77;line-height:1.65;font-weight:400}
.hero-cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:2rem}

/* Hero capability pills */
.hero-cap-pill{
  display:inline-flex;align-items:center;gap:4px;
  background:rgba(200,16,46,0.05);color:#7B1A2C;
  font-size:0.8125rem;font-weight:500;padding:6px 14px;
  border-radius:50rem;border:1px solid rgba(200,16,46,0.12);
  transition:all 0.2s;cursor:default;
}
.hero-cap-pill:hover{background:rgba(200,16,46,0.1);transform:translateY(-1px);box-shadow:0 2px 8px rgba(200,16,46,0.15)}
.hero-cap-pill .fa,.hero-cap-pill .fas{font-size:0.75rem;color:#C8102E}

/* Hero Stats — Vuexy card */
.hero-stats{
  display:flex;align-items:center;justify-content:center;gap:0;
  background:var(--bs-paper-bg,#fff);
  box-shadow:0 0.1875rem 0.75rem rgba(47,43,61,0.14);
  border-radius:0.625rem;padding:1.25rem 1.5rem;max-width:850px;margin:0 auto;
}
.hero-stat{text-align:center;padding:0 1rem;flex:1;min-width:0}
.hero-stat-number{font-size:1.25rem;font-weight:700;color:#C8102E;letter-spacing:-0.5px;display:flex;align-items:center;justify-content:center;gap:0}
.hero-stat-label{font-size:0.7rem;color:#97959e;font-weight:500;margin-top:0.125rem}
.hero-stat-divider{width:1px;height:2.25rem;background:#e6e6e8}

/* ======== SECTIONS COMMON ======== */
.section-header{text-align:center;margin-bottom:3rem}
.section-pill{
  display:inline-block;background:rgba(200,16,46,0.06);color:#C8102E;
  font-size:0.75rem;font-weight:600;padding:0.375rem 1rem;border-radius:50rem;
  letter-spacing:0.5px;text-transform:uppercase;margin-bottom:1rem;
}
.section-title{font-weight:700;font-size:1.75rem;color:#444050;letter-spacing:-0.5px;margin-bottom:0.75rem}
.section-subtitle{font-size:0.9375rem;color:#97959e;max-width:500px;margin:0 auto}

/* ======== FEATURES — Vuexy cards ======== */
.section-features{padding:3.5rem 1.25rem;background:var(--bs-paper-bg,#fff)}
.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;max-width:1200px;margin:0 auto}
@media(max-width:1024px){.features-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.features-grid{grid-template-columns:1fr}}
.feature-card{
  padding:1.5rem 1.25rem;border-radius:0.625rem;background:#f8f7fa;
  border:none;transition:all 0.25s ease;box-shadow:none;
}
.feature-card:hover{transform:translateY(-4px);box-shadow:0 0.25rem 1.125rem rgba(47,43,61,0.16);background:var(--bs-paper-bg,#fff)}
.feature-icon-wrap{width:2.75rem;height:2.75rem;border-radius:0.625rem;display:flex;align-items:center;justify-content:center;font-size:1.125rem;margin-bottom:0.75rem}
.fi-red{background:rgba(200,16,46,0.08);color:#C8102E}
.fi-blue{background:rgba(0,186,209,0.08);color:#00bad1}
.fi-green{background:rgba(40,199,111,0.08);color:#28c76f}
.fi-purple{background:rgba(115,103,240,0.08);color:#7367f0}
.fi-orange{background:rgba(255,159,67,0.08);color:#ff9f43}
.fi-teal{background:rgba(32,201,151,0.08);color:#20c997}
.feature-title{font-weight:600;font-size:0.9375rem;color:#444050;margin-bottom:0.375rem}
.feature-desc{font-size:0.8125rem;color:#6d6b77;line-height:1.55;margin:0 0 0.5rem}
.feature-list{list-style:none;padding:0;margin:0}
.feature-list li{font-size:0.75rem;color:#6d6b77;line-height:1.6;padding:2px 0 2px 14px;position:relative}
.feature-list li::before{content:'✓';position:absolute;left:0;color:#C8102E;font-weight:700;font-size:0.7rem}

/* ======== HOW IT WORKS ======== */
.section-how{padding:5rem 1.25rem;background:#f8f7fa}
.steps-grid{display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap;max-width:1100px;margin:0 auto}
.step-card{
  text-align:center;padding:2rem 1.5rem;background:var(--bs-paper-bg,#fff);border-radius:0.625rem;
  border:none;width:200px;position:relative;transition:all 0.25s;
  box-shadow:0 0.125rem 0.5rem rgba(47,43,61,0.12);
}
.step-card:hover{transform:translateY(-3px);box-shadow:0 0.25rem 1.125rem rgba(47,43,61,0.16)}
.step-number{
  position:absolute;top:-0.875rem;left:50%;transform:translateX(-50%);
  background:linear-gradient(72.47deg,#C8102E,#E25B6A);color:#fff;
  font-weight:700;font-size:0.75rem;padding:0.25rem 0.875rem;border-radius:50rem;
}
.step-icon{color:#C8102E;margin-bottom:1rem;margin-top:0.5rem}
.step-card h4{font-weight:600;font-size:1rem;color:#444050;margin-bottom:0.5rem}
.step-card p{font-size:0.8125rem;color:#6d6b77;line-height:1.6;margin:0}
.step-connector{padding:0 0.5rem;flex-shrink:0}

/* ======== PRICING — Vuexy ======== */
.section-pricing{padding:5rem 1.25rem;background:var(--bs-paper-bg,#fff)}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;max-width:1000px;margin:0 auto;align-items:start}
.pricing-card{
  padding:2rem 1.5rem;border-radius:0.625rem;background:#f8f7fa;
  border:none;text-align:center;position:relative;transition:all 0.25s;
}
.pricing-card:hover{transform:translateY(-3px);box-shadow:0 0.25rem 1.125rem rgba(47,43,61,0.16)}
.pricing-featured{
  background:var(--bs-paper-bg,#fff);border:2px solid #C8102E;
  box-shadow:0 0.25rem 1.125rem rgba(200,16,46,0.15);transform:scale(1.03);
}
.pricing-featured:hover{transform:scale(1.03) translateY(-3px)}
.pricing-popular{
  position:absolute;top:-0.875rem;left:50%;transform:translateX(-50%);
  background:linear-gradient(72.47deg,#C8102E,#E25B6A);color:#fff;
  font-size:0.6875rem;font-weight:600;padding:0.375rem 1.25rem;border-radius:50rem;white-space:nowrap;
}
.pricing-badge{font-weight:600;font-size:0.875rem;color:#C8102E;margin-bottom:0.75rem;text-transform:uppercase;letter-spacing:0.75px}
.pricing-price{font-size:2.375rem;font-weight:800;color:#444050;margin-bottom:0.5rem;line-height:1}
.pricing-currency{font-size:0.9375rem;font-weight:500;color:#97959e;margin-left:0.25rem}
.pricing-period{font-size:0.8125rem;font-weight:400;color:#97959e}
.pricing-desc{font-size:0.875rem;color:#6d6b77;margin-bottom:1.5rem}
.pricing-features{list-style:none;padding:0;margin:0 0 1.5rem;text-align:left}
.pricing-features li{padding:0.5rem 0;font-size:0.875rem;color:#444050;border-bottom:1px solid #eaeaec}
.pricing-features li:last-child{border-bottom:none}

/* ======== TESTIMONIALS ======== */
.section-testimonials{padding:5rem 1.25rem;background:#f8f7fa}
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;max-width:1100px;margin:0 auto}
.testimonial-card{
  padding:1.5rem;border-radius:0.625rem;background:var(--bs-paper-bg,#fff);
  border:none;transition:all 0.25s;box-shadow:0 0.125rem 0.5rem rgba(47,43,61,0.12);
}
.testimonial-card:hover{box-shadow:0 0.25rem 1.125rem rgba(47,43,61,0.16);transform:translateY(-2px)}
.testimonial-stars{color:#ff9f43;font-size:0.8125rem;margin-bottom:1rem;letter-spacing:2px}
.testimonial-text{font-size:0.9375rem;color:#444050;line-height:1.65;font-style:italic;margin-bottom:1.25rem}
.testimonial-author{display:flex;align-items:center;gap:0.875rem}
.testimonial-avatar{
  width:2.5rem;height:2.5rem;border-radius:0.625rem;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(72.47deg,#C8102E,#E25B6A);color:#fff;font-weight:600;font-size:0.8125rem;
}
.ta-blue{background:linear-gradient(72.47deg,#00bad1,#1ce7ff)!important}
.ta-green{background:linear-gradient(72.47deg,#28c76f,#48da89)!important}

/* ======== DOCS ======== */
.section-docs{padding:5rem 1.25rem;background:#f8f7fa}
.docs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;max-width:1100px;margin:0 auto}
.doc-card{
  padding:1.5rem;border-radius:0.625rem;background:var(--bs-paper-bg,#fff);
  border:none;transition:all 0.25s;text-align:center;
  box-shadow:0 0.125rem 0.5rem rgba(47,43,61,0.12);
}
.doc-card:hover{transform:translateY(-3px);box-shadow:0 0.25rem 1.125rem rgba(47,43,61,0.16)}
.doc-icon{width:3rem;height:3rem;border-radius:0.625rem;display:inline-flex;align-items:center;justify-content:center;background:rgba(200,16,46,0.08);color:#C8102E;margin-bottom:1rem}
.doc-icon-blue{background:rgba(0,186,209,0.08)!important;color:#00bad1!important}
.doc-icon-green{background:rgba(40,199,111,0.08)!important;color:#28c76f!important}
.doc-icon-orange{background:rgba(255,159,67,0.08)!important;color:#ff9f43!important}
.doc-card h4{font-weight:600;font-size:1rem;color:#444050;margin-bottom:0.5rem}
.doc-card p{font-size:0.8125rem;color:#6d6b77;line-height:1.6;margin-bottom:1rem}
.doc-link{color:#C8102E;font-weight:500;font-size:0.875rem;text-decoration:none;display:inline-flex;align-items:center;gap:0.375rem;transition:gap 0.2s}
.doc-link:hover{gap:0.625rem;color:#9E0C24;text-decoration:none}

/* ======== FAQ ======== */
.section-faq{padding:5rem 1.25rem;background:var(--bs-paper-bg,#fff)}
.faq-grid{max-width:800px;margin:0 auto;display:grid;gap:1rem}
.faq-item{
  padding:1.25rem 1.5rem;border-radius:0.625rem;background:#f8f7fa;
  border:none;transition:all 0.2s;
}
.faq-item:hover{box-shadow:0 0.125rem 0.5rem rgba(47,43,61,0.12)}
.faq-q{font-weight:600;font-size:0.9375rem;color:#444050;margin-bottom:0.5rem}
.faq-a{font-size:0.875rem;color:#6d6b77;line-height:1.7;margin:0}

/* ======== CTA FINAL — Vuexy dark gradient ======== */
.section-cta-final{
  padding:5rem 1.25rem;
  background:linear-gradient(72.47deg,#2f3349 22.16%,#444876 50%,#C8102E 100%);
  position:relative;overflow:hidden;
}
.section-cta-final::before{
  content:'';position:absolute;top:-40%;right:-15%;width:500px;height:500px;
  background:radial-gradient(circle,rgba(255,255,255,0.04) 0%,transparent 70%);border-radius:50%;
}
.cta-title{font-weight:700;font-size:1.75rem;color:#fff;margin-bottom:0.75rem;letter-spacing:-0.5px}
.cta-subtitle{font-size:0.9375rem;color:rgba(255,255,255,0.65);margin-bottom:2rem}
.cta-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* ======== FOOTER — Vuexy dark ======== */
.vitrine-footer{padding:3.5rem 1.25rem 1.5rem;background:#2f3349;color:#fff}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2.5rem;margin-bottom:2.5rem}
.footer-brand{font-weight:700;font-size:1.0625rem;margin-bottom:0.75rem;color:#fff}
.footer-text{font-size:0.875rem;color:rgba(207,205,228,0.5);line-height:1.65}
.footer-socials{display:flex;gap:0.75rem;margin-top:1rem}
.footer-socials a{
  width:2.25rem;height:2.25rem;border-radius:0.375rem;background:rgba(255,255,255,0.06);
  display:flex;align-items:center;justify-content:center;color:rgba(207,205,228,0.5);
  transition:all 0.2s;font-size:0.875rem;
}
.footer-socials a:hover{background:#C8102E;color:#fff;transform:translateY(-2px)}
.footer-col h6{font-weight:600;font-size:0.8125rem;color:rgba(207,205,228,0.8);margin-bottom:1rem;text-transform:uppercase;letter-spacing:0.75px}
.footer-col ul{list-style:none;padding:0;margin:0}
.footer-col ul li{margin-bottom:0.625rem}
.footer-col ul li a{color:rgba(207,205,228,0.45);font-size:0.875rem;text-decoration:none;transition:color 0.2s}
.footer-col ul li a:hover{color:#fff}
.footer-hr{border-color:rgba(255,255,255,0.06);margin:0 0 1.25rem}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}
.footer-bottom p{font-size:0.8125rem;color:rgba(207,205,228,0.35);margin:0}
.footer-made{font-size:0.8125rem;color:rgba(207,205,228,0.35)}

/* ======== MODALS (Force center viewport) ======== */
.modal{display:flex!important;align-items:center!important;justify-content:center!important;padding:0!important}
.modal.fade .modal-dialog{transform:scale(0.95)!important;transition:transform 0.2s ease,opacity 0.2s ease!important}
.modal.show .modal-dialog{transform:scale(1)!important}
.modal-dialog{margin:auto!important;display:flex!important;align-items:center!important;min-height:100%!important;max-height:90vh!important;pointer-events:none}
.modal-content{border-radius:0.625rem!important;border:none!important;box-shadow:0 0.375rem 1.5rem rgba(47,43,61,0.18)!important;overflow:hidden;pointer-events:auto;max-height:90vh!important;overflow-y:auto!important;width:100%!important}
.modal-header{border-bottom:1px solid #e6e6e8!important;background:transparent!important;padding:1.125rem 1.5rem!important}
.modal-title{font-weight:600!important;color:#444050!important;font-size:1.0625rem!important}
.modal-body{padding:1.5rem!important}
.modal-body .form-control{border:1px solid #e6e6e8;border-radius:0.375rem;padding:0.5rem 0.875rem;font-size:0.9375rem;transition:all 0.2s}
.modal-body .form-control:focus{border-color:#C8102E;box-shadow:0 0.125rem 0.25rem rgba(200,16,46,0.1)}
.modal-body label{font-weight:500;font-size:0.8125rem;color:#444050;margin-bottom:0.25rem}
.modal-footer{border-top:1px solid #e6e6e8!important;padding:0.875rem 1.5rem!important}
.modal-backdrop{z-index:1040!important}
.modal{z-index:1050!important}
.captcha-box{background:rgba(0,186,209,0.06);border-radius:0.5rem;border:1px solid rgba(0,186,209,0.15);padding:0.875rem;margin-top:0.75rem}
.captcha-label{font-weight:600;font-size:0.8125rem;color:#00bad1;margin-bottom:0.375rem}

/* ======== RESPONSIVE ======== */
@media(max-width:992px){
  .features-grid,.pricing-grid,.testimonials-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .steps-grid{flex-direction:column;gap:1rem}
  .step-connector{transform:rotate(90deg);margin:0.5rem 0}
  .docs-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .hero-title{font-size:2rem;letter-spacing:-0.75px}
  .hero-section{padding:7rem 1rem 3.5rem}
  .hero-stats{flex-direction:column;gap:1rem;padding:1.25rem}
  .hero-stat-divider{width:3.5rem;height:1px}
  .features-grid,.pricing-grid,.testimonials-grid,.docs-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .section-title{font-size:1.5rem}
  .pricing-featured{transform:none}
  .pricing-featured:hover{transform:translateY(-3px)}
  .footer-bottom{flex-direction:column;gap:0.5rem;text-align:center}
}

/* ======== ANIMATIONS ======== */
@keyframes fadeInUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.feature-card,.step-card,.pricing-card,.testimonial-card,.faq-item,.doc-card{animation:fadeInUp 0.4s ease forwards}

/* ======== LIST RESET ======== */
.vitrine-container ul,.vitrine-container ol,.vitrine-footer ul,.vitrine-footer ol,.pricing-features,.faq-grid ul{
  list-style:none!important;padding-left:0!important;margin-left:0!important}
.vitrine-container li,.vitrine-footer li,.pricing-features li{list-style:none!important}
.vitrine-container li::before,.vitrine-container li::marker,.vitrine-footer li::before,.vitrine-footer li::marker{content:none!important;display:none!important}