/* ==========================================================================
   EMARKETACE — MAIN DESIGN SYSTEM
   Mobile-first. Loaded after Bootstrap 5 grid/utilities.
   ========================================================================== */

:root{
  --color-primary: #2E5B97;
  --color-primary-dark: #183A63;
  --color-white: #FFFFFF;
  --color-light: #F3F7FC;
  --color-text: #1E2A3A;
  --color-text-muted: #5B6B7F;
  --color-border: #E3EAF3;
  --color-success: #2E9E6B;

  --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 32px;
  --space-lg: 64px;
  --space-xl: 96px;

  --shadow-sm: 0 2px 10px rgba(24, 58, 99, 0.06);
  --shadow-md: 0 10px 30px rgba(24, 58, 99, 0.10);
  --transition: 180ms ease;
}

/* ---------- Base ---------- */
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  color:var(--color-text);
  background:#fff;
  font-size:16px;
  line-height:1.65;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading);
  font-weight:700;
  color:var(--color-primary-dark);
  line-height:1.2;
  margin-bottom:var(--space-sm);
}
h1{ font-size:clamp(2rem, 4vw + 1rem, 3.25rem); }
h2{ font-size:clamp(1.6rem, 2.5vw + 1rem, 2.5rem); }
h3{ font-size:clamp(1.25rem, 1.5vw + 1rem, 1.75rem); }
p{ margin-bottom:var(--space-sm); color:var(--color-text-muted); }
a{ color:var(--color-primary); text-decoration:none; transition:color var(--transition); }
a:hover{ color:var(--color-primary-dark); }
img{ max-width:100%; height:auto; display:block; }
section{ padding:var(--space-lg) 0; }
.section-light{ background:var(--color-light); }
.eyebrow{
  display:inline-block; text-transform:uppercase; letter-spacing:.08em;
  font-size:.78rem; font-weight:700; color:var(--color-primary);
  background:rgba(46,91,151,.08); padding:6px 14px; border-radius:999px;
  margin-bottom:var(--space-sm);
}
.section-heading{ max-width:720px; margin:0 auto var(--space-md); text-align:center; }
.section-heading p{ font-size:1.05rem; }

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--font-heading); font-weight:600; border-radius:999px;
  padding:.85rem 1.75rem; transition:all var(--transition); border:2px solid transparent;
  display:inline-flex; align-items:center; gap:.5rem;
}
.btn-primary-brand{
  background:var(--color-primary); color:#fff; border-color:var(--color-primary);
}
.btn-primary-brand:hover{ background:var(--color-primary-dark); border-color:var(--color-primary-dark); color:#fff; transform:translateY(-1px); }
.btn-outline-brand{
  background:transparent; color:var(--color-primary); border-color:var(--color-primary);
}
.btn-outline-brand:hover{ background:var(--color-primary); color:#fff; transform:translateY(-1px); }
.btn-light-brand{ background:#fff; color:var(--color-primary); border-color:#fff; }
.btn-light-brand:hover{ background:var(--color-light); transform:translateY(-1px); }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:1000; background:#fff;
  box-shadow:0 1px 0 rgba(24,58,99,.06); transition:box-shadow var(--transition);
}
.site-header.is-scrolled{ box-shadow:var(--shadow-sm); }
.site-header .navbar{ padding:.85rem 0; }
.site-header .navbar-brand img{ max-height:42px; }
.site-header .nav-link{
  font-family:var(--font-heading); font-weight:600; color:var(--color-text);
  padding:.5rem 1rem !important; position:relative;
}
.site-header .nav-link:hover, .site-header .nav-link.active{ color:var(--color-primary); }
.header-cta{ margin-left:.5rem; }
.header-audit-link{ font-size:.9rem; font-weight:600; color:var(--color-text-muted); margin-right:1rem; }

/* ---------- Hero ---------- */
.hero{ padding:var(--space-xl) 0; background:linear-gradient(180deg, var(--color-light) 0%, #fff 100%); overflow:hidden; }
.hero h1{ margin-bottom:var(--space-sm); }
.hero .lead{ font-size:1.15rem; max-width:560px; }
.hero-badges{ display:flex; flex-wrap:wrap; gap:1.5rem; margin-top:var(--space-md); align-items:center; }
.hero-badges span{ font-weight:700; color:var(--color-primary-dark); font-family:var(--font-heading); }
.hero-visual{ position:relative; }
.hero-visual img{ border-radius:var(--radius-lg); box-shadow:var(--shadow-md); }
.stat-card{
  background:#fff; border-radius:var(--radius-md); box-shadow:var(--shadow-md);
  padding:1.25rem 1.5rem; position:absolute; bottom:-1.5rem; left:-1.5rem;
}
.stat-card strong{ display:block; font-size:1.5rem; color:var(--color-primary); font-family:var(--font-heading); }
.stat-card span{ font-size:.85rem; color:var(--color-text-muted); }

/* ---------- Cards ---------- */
.card-brand{
  background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-md);
  padding:var(--space-md); height:100%; transition:transform var(--transition), box-shadow var(--transition);
}
.card-brand:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.card-icon{
  width:56px; height:56px; border-radius:var(--radius-sm); background:var(--color-light);
  display:flex; align-items:center; justify-content:center; margin-bottom:var(--space-sm);
  color:var(--color-primary); font-size:1.5rem;
}

/* ---------- Why choose ---------- */
.why-item{ display:flex; gap:1rem; margin-bottom:var(--space-sm); }
.why-item .why-icon{
  flex:0 0 44px; height:44px; width:44px; border-radius:50%; background:var(--color-primary);
  color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700;
}

/* ---------- Process ---------- */
.process-step{ text-align:center; position:relative; padding:0 1rem; }
.process-step .step-num{
  width:64px; height:64px; border-radius:50%; background:var(--color-primary-dark); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-heading);
  font-weight:700; font-size:1.25rem; margin:0 auto var(--space-sm);
}

/* ---------- Industries ---------- */
.industry-pill{
  background:var(--color-light); border-radius:var(--radius-md); padding:1.5rem 1rem;
  text-align:center; font-weight:700; color:var(--color-primary-dark); font-family:var(--font-heading);
  transition:background var(--transition);
}
.industry-pill:hover{ background:var(--color-primary); color:#fff; }

/* ---------- Case studies / portfolio ---------- */
.case-card{ border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm); background:#fff; }
.case-card img{ aspect-ratio:4/3; object-fit:cover; }
.case-card-body{ padding:var(--space-sm) var(--space-sm) var(--space-md); }
.case-tag{ font-size:.75rem; font-weight:700; text-transform:uppercase; color:var(--color-primary); letter-spacing:.05em; }
.result-badge{ display:inline-block; background:var(--color-light); color:var(--color-primary-dark); border-radius:999px; padding:.25rem .75rem; font-size:.85rem; font-weight:700; margin-right:.4rem; }
.portfolio-filters{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-bottom:var(--space-md); }
.portfolio-filters button{
  border:2px solid var(--color-border); background:#fff; border-radius:999px; padding:.5rem 1.25rem;
  font-weight:600; font-family:var(--font-heading); color:var(--color-text); cursor:pointer; transition:var(--transition);
}
.portfolio-filters button.active,.portfolio-filters button:hover{ background:var(--color-primary); border-color:var(--color-primary); color:#fff; }

/* ---------- Testimonials ---------- */
.testimonial-card{
  background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-md);
  padding:var(--space-md); height:100%;
}
.testimonial-quote{ font-size:1.05rem; font-style:italic; color:var(--color-text); }
.testimonial-person{ display:flex; align-items:center; gap:.75rem; margin-top:var(--space-sm); }
.testimonial-person img{ width:48px; height:48px; border-radius:50%; object-fit:cover; }
.testimonial-person strong{ display:block; font-family:var(--font-heading); }
.testimonial-person span{ font-size:.85rem; color:var(--color-text-muted); }

/* ---------- FAQ ---------- */
.faq-item{ border-bottom:1px solid var(--color-border); padding:var(--space-sm) 0; }
.faq-question{
  display:flex; justify-content:space-between; align-items:center; cursor:pointer;
  font-family:var(--font-heading); font-weight:700; color:var(--color-primary-dark);
}
.faq-answer{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.faq-item.open .faq-answer{ max-height:400px; margin-top:.75rem; }
.faq-toggle{ transition:transform .2s ease; }
.faq-item.open .faq-toggle{ transform:rotate(45deg); }

/* ---------- CTA band ---------- */
.cta-band{ background:var(--color-primary-dark); color:#fff; border-radius:var(--radius-lg); padding:var(--space-lg); text-align:center; }
.cta-band h2{ color:#fff; }
.cta-band p{ color:rgba(255,255,255,.8); }
.cta-band .btn-outline-brand{ color:#fff; border-color:rgba(255,255,255,.6); }
.cta-band .btn-outline-brand:hover{ background:#fff; color:var(--color-primary-dark); border-color:#fff; }

/* ---------- Forms ---------- */
.form-control-brand{
  border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:.85rem 1rem;
  width:100%; margin-bottom:var(--space-sm); font-family:var(--font-body);
}
.form-control-brand:focus{ outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px rgba(46,91,151,.12); }
.contact-card{ background:var(--color-light); border-radius:var(--radius-lg); padding:var(--space-md); }

/* ---------- Blog ---------- */
.blog-card{ border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm); background:#fff; margin-bottom:var(--space-md); }
.blog-card img{ aspect-ratio:16/9; object-fit:cover; }
.blog-card-body{ padding:var(--space-sm) var(--space-md) var(--space-md); }
.blog-meta{ font-size:.85rem; color:var(--color-text-muted); display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:.5rem; }
.blog-category{ color:var(--color-primary); font-weight:700; text-transform:uppercase; font-size:.75rem; letter-spacing:.05em; }
.single-post-header{ padding:var(--space-lg) 0 var(--space-md); background:var(--color-light); }
.single-post-content{ font-size:1.08rem; line-height:1.8; }
.single-post-content h2{ margin-top:var(--space-md); }
.single-post-content blockquote{
  border-left:4px solid var(--color-primary); padding:1rem 1.5rem; background:var(--color-light);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0; font-style:italic; margin:var(--space-md) 0;
}
.single-post-content pre{ background:#0f1b2d; color:#e7edf5; padding:1.25rem; border-radius:var(--radius-sm); overflow-x:auto; }
.reading-progress{ position:fixed; top:0; left:0; height:3px; background:var(--color-primary); z-index:2000; width:0%; }
.toc-box{ background:var(--color-light); border-radius:var(--radius-md); padding:var(--space-sm) var(--space-md); margin-bottom:var(--space-md); }
.toc-box ol{ margin-bottom:0; }
.author-box{ display:flex; gap:1rem; background:var(--color-light); border-radius:var(--radius-md); padding:var(--space-md); margin:var(--space-md) 0; }
.author-box img{ width:64px; height:64px; border-radius:50%; object-fit:cover; }
.share-buttons a{
  display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:50%; border:1px solid var(--color-border); margin-right:.5rem; color:var(--color-text);
}
.share-buttons a:hover{ background:var(--color-primary); color:#fff; border-color:var(--color-primary); }
.sidebar-widget{ background:var(--color-light); border-radius:var(--radius-md); padding:var(--space-md); margin-bottom:var(--space-md); }
.sidebar-widget h4{ font-size:1.05rem; }
.sidebar .widget-list li{ padding:.5rem 0; border-bottom:1px solid var(--color-border); }
.sticky-sidebar{ position:sticky; top:100px; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--color-primary-dark); color:rgba(255,255,255,.75); padding-top:var(--space-xl); }
.site-footer h4{ color:#fff; font-size:1.1rem; margin-bottom:var(--space-sm); }
.site-footer a{ color:rgba(255,255,255,.75); }
.site-footer a:hover{ color:#fff; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top:var(--space-lg); padding:1.5rem 0; font-size:.9rem; }
.footer-social a{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
  display:inline-flex; align-items:center; justify-content:center; margin-right:.5rem;
}
.footer-social a:hover{ background:var(--color-primary); border-color:var(--color-primary); }

/* ---------- Floating / sticky conversion elements ---------- */
.floating-whatsapp{
  position:fixed; bottom:24px; right:24px; z-index:1500; width:58px; height:58px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md);
  color:#fff; font-size:1.6rem;
}
.mobile-sticky-cta{
  position:fixed; bottom:0; left:0; right:0; z-index:1400; background:#fff; box-shadow:0 -4px 20px rgba(24,58,99,.12);
  padding:.75rem 1rem; display:flex; gap:.5rem;
}
@media (min-width: 992px){ .mobile-sticky-cta{ display:none; } }
.exit-popup-overlay{
  position:fixed; inset:0; background:rgba(24,58,99,.55); z-index:2000; display:none; align-items:center; justify-content:center; padding:1rem;
}
.exit-popup-overlay.show{ display:flex; }
.exit-popup{ background:#fff; border-radius:var(--radius-lg); padding:var(--space-lg); max-width:480px; width:100%; position:relative; text-align:center; }
.exit-popup-close{ position:absolute; top:1rem; right:1rem; background:none; border:none; font-size:1.5rem; cursor:pointer; color:var(--color-text-muted); }

/* ---------- Utilities ---------- */
.text-brand-primary{ color:var(--color-primary) !important; }
.bg-brand-light{ background:var(--color-light) !important; }
.rounded-brand{ border-radius:var(--radius-lg) !important; }
.trust-logos img{ max-height:34px; opacity:.6; filter:grayscale(1); transition:var(--transition); }
.trust-logos img:hover{ opacity:1; filter:none; }
.skip-link{ position:absolute; left:-999px; top:0; background:var(--color-primary); color:#fff; padding:.75rem 1rem; z-index:3000; }
.skip-link:focus{ left:1rem; top:1rem; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px){
  .stat-card{ position:static; margin-top:1rem; }
  section{ padding:var(--space-md) 0; }
}