/* Start custom CSS *//* ==========================================================================
   eduBITES — Solutions page-specific stylesheet
   Self-contained: includes global tokens, header, footer, and page sections.
   Contains: sol-hero, services, product modals, outcomes, fade-up,
   page-specific CTA, and page-specific responsive rules.
   ========================================================================== */

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

/* --- Tokens / Variables ---------------------------------------------------- */
:root{
  --purple:#322867;--purple-dark:#251e4e;--purple-deep:#1a1535;
  --purple-light:#edeaf6;--purple-mid:#c5bde8;
  --coral:#F5576C;--coral-light:#fde8eb;
  --pink:#FF006B;--pink-light:#ffe0ef;
  --lavender:#F093FB;--lavender-light:#fce8fe;
  --charcoal:#393D3F;
  --off-white:#F8F8F8;--white:#FFFFFF;
  --gray-50:#F4F4F4;--gray-100:#E8E8E8;--gray-200:#CCCCCC;
  --gray-400:#AAAAAA;--gray-500:#888888;--gray-700:#444444;--black:#111111;
  --font:'Poppins',sans-serif;
  --nav-h:68px;
  --r:12px;--rl:18px;
}

/* --- Reset / base ---------------------------------------------------------- */
.eb-scope *,
.eb-scope *::before,
.eb-scope *::after{margin:0;padding:0;box-sizing:border-box;}
.eb-scope,.eb-scope h1,.eb-scope h2,.eb-scope h3,.eb-scope h4,.eb-scope h5,.eb-scope p,.eb-scope a,.eb-scope button,.eb-scope input,.eb-scope textarea,.eb-scope select{font-family:'Poppins',sans-serif!important;}
.eb-scope{color:var(--black);background:var(--white);}
html{scroll-behavior:smooth;}

/* --- Typography ------------------------------------------------------------ */
.eb-scope section{padding:100px 5%;}
.mw{max-width:1200px;margin:0 auto;}
.slabel{font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--purple);margin-bottom:16px;}
.eb-scope h1{font-size:clamp(36px,5vw,62px)!important;font-weight:700!important;line-height:1.1!important;letter-spacing:-1.5px!important;color:var(--black);}
.eb-scope h2{font-size:clamp(26px,3.5vw,42px)!important;font-weight:700!important;line-height:1.15!important;letter-spacing:-.8px!important;color:var(--black);}
.eb-scope h3{font-size:20px!important;font-weight:600!important;line-height:1.3!important;color:var(--black);}
.eb-scope p{font-family:'Poppins',sans-serif!important;font-size:16px;font-weight:400!important;line-height:1.75;color:var(--gray-700);-webkit-text-fill-color:inherit!important;background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;text-shadow:none!important;}
.eb-scope .lead{font-size:18px!important;line-height:1.7!important;color:var(--gray-700);max-width:560px;}

/* --- Buttons --------------------------------------------------------------- */
html body .eb-scope a.bp,
html body .eb-scope a.bp:link,
html body .eb-scope a.bp:visited,
html body .eb-scope a.bp:hover,
html body .eb-scope a.bp:focus,
html body .eb-scope a.bp:active{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  background:#322867!important;
  background-image:none!important;
  background-color:#322867!important;
  color:#ffffff!important;
  -webkit-text-fill-color:#ffffff!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
  border:none!important;
  padding:14px 28px!important;
  border-radius:10px!important;
  font-size:15px!important;
  font-weight:500!important;
  font-family:'Poppins',sans-serif!important;
  text-decoration:none!important;
  text-shadow:none!important;
  cursor:pointer!important;
  min-height:44px!important;
  line-height:1.2!important;
  letter-spacing:0!important;
  text-transform:none!important;
  transition:background .15s,transform .1s!important;
}
html body .eb-scope a.bp:hover{background:#251e4e!important;background-color:#251e4e!important;transform:translateY(-1px)!important;}


/* Apply .bp styles to <button> elements too */
html body .eb-scope button.bp,
html body button.bp{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  background:#322867!important;
  background-image:none!important;
  background-color:#322867!important;
  color:#ffffff!important;
  -webkit-text-fill-color:#ffffff!important;
  border:none!important;
  padding:14px 28px!important;
  border-radius:10px!important;
  font-size:15px!important;
  font-weight:500!important;
  font-family:'Poppins',sans-serif!important;
  text-decoration:none!important;
  text-shadow:none!important;
  cursor:pointer!important;
  min-height:44px!important;
  line-height:1.2!important;
  letter-spacing:0!important;
  text-transform:none!important;
  transition:background .15s,transform .1s!important;
}
html body .eb-scope button.bp:hover,
html body button.bp:hover{background:#251e4e!important;background-color:#251e4e!important;transform:translateY(-1px)!important;}

html body .eb-scope a.bg,
html body .eb-scope a.bg:link,
html body .eb-scope a.bg:visited,
html body .eb-scope a.bg:hover,
html body .eb-scope a.bg:focus{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  background:transparent!important;
  background-image:none!important;
  color:#111111!important;
  -webkit-text-fill-color:#111111!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
  border:1.5px solid #CCCCCC!important;
  padding:13px 26px!important;
  border-radius:10px!important;
  font-size:15px!important;
  font-weight:500!important;
  font-family:'Poppins',sans-serif!important;
  text-decoration:none!important;
  min-height:44px!important;
}
html body .eb-scope a.bg:hover{border-color:#322867!important;color:#322867!important;-webkit-text-fill-color:#322867!important;background:#edeaf6!important;}



/* Apply .bg styles to <button> elements too */
html body .eb-scope button.bg,
html body button.bg{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  background:transparent!important;
  background-image:none!important;
  background-color:transparent!important;
  color:#111111!important;
  -webkit-text-fill-color:#111111!important;
  border:1.5px solid #CCCCCC!important;
  padding:13px 26px!important;
  border-radius:10px!important;
  font-size:15px!important;
  font-weight:500!important;
  font-family:'Poppins',sans-serif!important;
  text-decoration:none!important;
  cursor:pointer!important;
  min-height:44px!important;
  line-height:1.2!important;
  letter-spacing:0!important;
  text-transform:none!important;
  transition:border-color .15s,color .15s,background .15s!important;
}
html body .eb-scope button.bg:hover,
html body button.bg:hover{border-color:#322867!important;color:#322867!important;-webkit-text-fill-color:#322867!important;background:#edeaf6!important;background-color:#edeaf6!important;}

/* --- Gradient text --------------------------------------------------------- */
.grad-text{background:linear-gradient(90deg,#322867 0%,#FF006B 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-style:normal;}

/* ==========================================================================
   THEME WRAPPER OVERRIDE
   The MasterStudy theme wraps the page in <div id="wrapper"> with a
   max-width that constrains Elementor "full width" sections. When the page
   contains any eduBITES section block (.eb-scope), force the wrapper to
   span the viewport so our full-bleed sections actually go edge-to-edge.
   ========================================================================== */
#wrapper:has(.eb-scope){
  max-width:100%!important;
  width:100%!important;
  padding-left:0!important;
  padding-right:0!important;
}
/* Fallback for browsers without :has() — breakout via negative margin. */
@supports not body.elementor-page-8184(:has(*)){
  .eb-scope{
    position:relative;
    width:100vw;
    max-width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
  }
}

/* ==========================================================================
   DEFENSIVE OVERFLOW / HEIGHT FIXES
   Some themes and page builders apply overflow:hidden or fixed heights to
   ancestor containers, which clips section content and makes the footer
   appear to overlap the last section. Force any container that wraps an
   eduBITES block to allow content to expand and stay visible.
   ========================================================================== */
.eb-scope{overflow:visible!important;}
.elementor-section:has(.eb-scope),
.elementor-row:has(.eb-scope),
.elementor-column:has(.eb-scope),
.elementor-element-populated:has(.eb-scope),
.elementor-widget-wrap:has(.eb-scope),
.elementor-widget:has(.eb-scope),
.elementor-widget-html:has(.eb-scope),
.elementor-widget-container:has(.eb-scope){
  overflow:visible!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
}

/* ==========================================================================
   ACCENT BAR + NAV
   ========================================================================== */
.abar{position:fixed;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--purple) 0%,var(--coral) 40%,var(--pink) 70%,var(--lavender) 100%);z-index:1001;}
.eb-nav{position:fixed;top:3px;left:0;right:0;z-index:1000;height:var(--nav-h);background:rgba(255,255,255,.95);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--gray-100);display:flex;align-items:center;justify-content:space-between;padding:0 5%;font-family:var(--font);}
.nav-logo{font-size:20px;font-weight:700;color:var(--black);cursor:pointer;letter-spacing:-.3px;user-select:none;text-decoration:none;display:flex;align-items:center;}
.nav-logo span{color:var(--purple);}
.nav-logo img{height:28px;display:block;}
.nav-links{display:flex;align-items:center;gap:2px;}
.nav-item{position:relative;}
.nav-item>a{display:flex;align-items:center;gap:5px;font-size:14px;font-weight:400;color:var(--gray-700);padding:8px 14px;border-radius:8px;cursor:pointer;text-decoration:none;transition:background .15s,color .15s;white-space:nowrap;user-select:none;}
.nav-item>a:hover,.nav-item.open>a{background:var(--purple-light);color:var(--purple);}
.nav-chevron{width:9px;height:9px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-3px;transition:transform .2s;flex-shrink:0;}
.nav-item.open .nav-chevron{transform:rotate(-135deg);margin-top:3px;}
.nav-dropdown{display:none;position:absolute;top:calc(100% + 8px);left:0;background:#fff;border:1px solid var(--gray-100);border-radius:var(--r);box-shadow:0 12px 40px rgba(50,40,103,.12);min-width:220px;padding:6px;z-index:2000;}
.nav-item.open .nav-dropdown{display:block;}
.nav-dropdown a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;font-size:14px;color:var(--gray-700);cursor:pointer;text-decoration:none;transition:background .12s,color .12s;}
.nav-dropdown a:hover{background:var(--purple-light);color:var(--purple);}
.ddl{font-weight:500;font-size:13px;color:var(--black);}
.dds{font-size:11px;color:var(--gray-500);margin-top:1px;}
.nav-actions{display:flex;align-items:center;gap:10px;}
.nav-cta{background:var(--purple);color:#fff;border:none;padding:10px 22px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;font-family:var(--font);transition:background .15s,transform .1s;text-decoration:none;display:inline-flex;align-items:center;}
.nav-cta:hover{background:var(--purple-dark);transform:translateY(-1px);}
/* Language toggle (DE/EN) */
.lang-toggle{display:inline-flex;align-items:center;background:var(--gray-50);border:1px solid var(--gray-100);border-radius:8px;padding:2px;}
.lang-toggle button{background:transparent;border:none;padding:5px 10px;font-size:12px;font-weight:600;color:var(--gray-500);cursor:pointer;border-radius:6px;font-family:var(--font);transition:background .15s,color .15s;letter-spacing:.5px;}
.lang-toggle button:hover{color:var(--purple);}
.lang-toggle button.active{background:#fff;color:var(--purple);box-shadow:0 1px 2px rgba(50,40,103,.08);}

/* Mobile menu toggle */
.nav-toggle{display:none;background:none;border:none;width:40px;height:40px;cursor:pointer;padding:8px;}
.nav-toggle span{display:block;width:100%;height:2px;background:var(--black);margin:5px 0;transition:transform .25s,opacity .25s;}
.eb-nav.is-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.eb-nav.is-open .nav-toggle span:nth-child(2){opacity:0;}
.eb-nav.is-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* High-specificity overrides for WordPress/Elementor theme conflicts */
.eb-nav,.eb-nav *{font-family:'Poppins',sans-serif!important;box-sizing:border-box!important;}
.eb-nav a.nav-logo,
.eb-nav a.nav-logo:link,
.eb-nav a.nav-logo:visited,
.eb-nav a.nav-logo:hover{color:#111111!important;-webkit-text-fill-color:#111111!important;background:none!important;background-image:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;text-decoration:none!important;text-shadow:none!important;}
.eb-nav .nav-item>a,
.eb-nav .nav-item>a:link,
.eb-nav .nav-item>a:visited{
  display:flex!important;
  align-items:center!important;
  gap:5px!important;
  font-family:'Poppins',sans-serif!important;
  font-size:14px!important;
  font-weight:400!important;
  color:#444444!important;
  -webkit-text-fill-color:#444444!important;
  background:transparent!important;
  background-image:none!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
  padding:8px 14px!important;
  border-radius:8px!important;
  text-decoration:none!important;
  text-shadow:none!important;
  text-transform:none!important;
  letter-spacing:0!important;
  line-height:1.4!important;
  white-space:nowrap!important;
  transition:background .15s,color .15s!important;
}
.eb-nav .nav-item>a:hover,
.eb-nav .nav-item.open>a{background:#edeaf6!important;color:#322867!important;-webkit-text-fill-color:#322867!important;}
.eb-nav .nav-dropdown a,
.eb-nav .nav-dropdown a:link,
.eb-nav .nav-dropdown a:visited{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  padding:10px 12px!important;
  border-radius:8px!important;
  font-family:'Poppins',sans-serif!important;
  font-size:14px!important;
  font-weight:400!important;
  color:#444444!important;
  -webkit-text-fill-color:#444444!important;
  background:transparent!important;
  background-image:none!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
  text-decoration:none!important;
  text-shadow:none!important;
  text-transform:none!important;
  letter-spacing:0!important;
}
.eb-nav .nav-dropdown a:hover{background:#edeaf6!important;color:#322867!important;-webkit-text-fill-color:#322867!important;}
.eb-nav a.nav-cta,
.eb-nav a.nav-cta:link,
.eb-nav a.nav-cta:visited,
.eb-nav a.nav-cta:hover,
.eb-nav a.nav-cta:focus,
.eb-nav a.nav-cta:active{
  display:inline-flex!important;
  align-items:center!important;
  background:#322867!important;
  background-image:none!important;
  background-color:#322867!important;
  color:#ffffff!important;
  -webkit-text-fill-color:#ffffff!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
  border:none!important;
  padding:10px 22px!important;
  border-radius:8px!important;
  font-family:'Poppins',sans-serif!important;
  font-size:14px!important;
  font-weight:500!important;
  line-height:1.2!important;
  letter-spacing:0!important;
  text-transform:none!important;
  text-decoration:none!important;
  text-shadow:none!important;
  cursor:pointer!important;
  box-shadow:none!important;
  transition:background .15s,transform .1s!important;
}
.eb-nav a.nav-cta:hover{background:#251e4e!important;background-color:#251e4e!important;transform:translateY(-1px)!important;}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.eb-footer{background:var(--charcoal);color:#fff;padding:60px 5% 40px;font-family:var(--font);}
.eb-footer .mw{max-width:1200px;margin:0 auto;}
.ftop{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:60px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.08);}
.flogo{font-size:20px;font-weight:700;margin-bottom:14px;color:#fff;}
.flogo img{height:24px;display:block;filter:brightness(0) invert(1);}
.fdesc{font-size:14px;color:rgba(255,255,255,.4);line-height:1.7;max-width:260px;}
.fcol h5{font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:16px;}
.fcol a{display:block;font-size:14px;color:rgba(255,255,255,.5);margin-bottom:10px;text-decoration:none;cursor:pointer;transition:color .15s;}
.fcol a:hover{color:var(--lavender);}
.fbot{display:flex;justify-content:space-between;align-items:center;padding-top:32px;flex-wrap:wrap;gap:16px;}
.fcopy{font-size:13px;color:rgba(255,255,255,.25);text-decoration:none;}
.fbot-links{display:flex;gap:20px;}

/* ==========================================================================
   RESPONSIVE — shared base/nav/footer
   Page-specific responsive rules live in each page CSS.
   ========================================================================== */

/* Tablets — up to 1024px */
@media (max-width:1024px){
  .eb-scope section{padding:80px 5%;}
  .ftop{grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;}
}

/* Small tablets — up to 900px */
@media (max-width:900px){
  .ftop{grid-template-columns:1fr 1fr;}
}

/* Mobile — up to 768px */
@media (max-width:768px){
  :root{--nav-h:60px;}
  .eb-scope section{padding:64px 5%;}
  .eb-scope h1{font-size:clamp(30px,8vw,42px);letter-spacing:-1px;}
  .eb-scope h2{font-size:clamp(24px,6vw,34px);}
  .lead{font-size:16px;}

  /* Mobile nav */
  .nav-toggle{display:block;}
  .nav-links{position:fixed;top:calc(var(--nav-h) + 3px);left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:16px 5%;border-bottom:1px solid var(--gray-100);box-shadow:0 12px 32px rgba(50,40,103,.08);max-height:calc(100vh - var(--nav-h) - 3px);overflow-y:auto;display:none;}
  .eb-nav.is-open .nav-links{display:flex;}
  .nav-item{width:100%;}
  .nav-item>a{padding:14px 12px;font-size:15px;justify-content:space-between;width:100%;}
  .nav-dropdown{position:static;display:none;background:var(--gray-50);border:none;box-shadow:none;padding:6px 0 6px 16px;margin-top:4px;border-radius:8px;}
  .nav-item.open .nav-dropdown{display:block;}
  .nav-actions{display:none;}
  .eb-nav.is-open .nav-actions{display:flex;width:100%;padding:12px 5% 16px;background:#fff;}
  .eb-nav.is-open .nav-cta{width:100%;justify-content:center;}

  /* Footer */
  .ftop{grid-template-columns:1fr 1fr;gap:32px 24px;padding-bottom:32px;}
  .ftop>div:first-child{grid-column:1 / -1;}
  .fdesc{max-width:none;}
  .fbot{flex-direction:column;align-items:flex-start;gap:12px;text-align:left;}
}

/* Smartphones — up to 600px / 480px (footer collapse + base type) */
@media (max-width:600px){
  .ftop{grid-template-columns:1fr;}
}
@media (max-width:480px){
  .eb-scope h1{font-size:30px;line-height:1.15;}
  .eb-scope h2{font-size:24px;}
  .eb-scope p{font-size:15px;}
  .lead{font-size:15px;}
  .ftop{grid-template-columns:1fr;gap:24px;}
  .fbot-links{flex-wrap:wrap;}
}

/* Reduce motion (global) */
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important;}
}

/* --- Page-specific helper (section header) -------------------------------- */
.section-header{max-width:680px;margin-bottom:64px;}

/* ── HERO ── */
.sol-hero{padding:calc(var(--nav-h) + 80px) 5% 80px;background:var(--charcoal);position:relative;overflow:hidden;}
.sol-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 70% 40%,rgba(245,87,108,0.12) 0%,transparent 70%);}
.sol-hero::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 50% 50% at 20% 80%,rgba(50,40,103,0.2) 0%,transparent 70%);}
.sol-hero .hero-inner{position:relative;z-index:2;max-width:700px;}
.sol-hero h1{color:white!important;-webkit-text-fill-color:white!important;margin-bottom:24px;}
.sol-hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--coral) 0%,var(--lavender) 100%)!important;-webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important;background-clip:text!important;}
.sol-hero .lead{color:rgba(255,255,255,.6)!important;-webkit-text-fill-color:rgba(255,255,255,.6)!important;max-width:560px;margin-bottom:40px;}
.sol-hero .hero-actions{display:flex;gap:14px;flex-wrap:wrap;}
.sol-hero .hero-actions a.bp{background:#fff!important;background-color:#fff!important;color:var(--charcoal)!important;-webkit-text-fill-color:var(--charcoal)!important;}
.sol-hero .hero-actions a.bp:hover{background:var(--off-white)!important;}
.sol-hero .hero-actions a.bg{border-color:rgba(255,255,255,.2)!important;color:rgba(255,255,255,.7)!important;-webkit-text-fill-color:rgba(255,255,255,.7)!important;background:transparent!important;}
.sol-hero .hero-actions a.bg:hover{background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.4)!important;color:white!important;-webkit-text-fill-color:white!important;}
.sol-hero .hero-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:36px;}
.sol-hero .hero-tag{font-size:12px;font-weight:500;padding:6px 14px;border-radius:100px;border:1px solid rgba(245,87,108,0.5);color:var(--coral);background:rgba(245,87,108,0.08);}
.sol-hero .hex-bg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1;}

/* ── SERVICES ── */
.services-section{padding:100px 5%;background:var(--white);}
.services-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch;}
.service-cards{display:contents;}
.service-card{background:white;border:1px solid var(--gray-100);border-radius:var(--rl);padding:32px;transition:box-shadow .2s,transform .2s;display:flex;gap:20px;align-items:flex-start;}
.service-card:hover{box-shadow:0 8px 32px rgba(50,40,103,.08);transform:translateY(-2px);}
.service-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.service-body h3{font-size:17px;font-weight:600;margin-bottom:8px;color:var(--black);}
.service-body p{font-size:14px;line-height:1.7;color:var(--gray-500);}
.service-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;}
.service-tags span{font-size:11px;font-weight:500;padding:4px 10px;border-radius:100px;background:var(--off-white);color:var(--gray-700);border:1px solid var(--gray-100);}
.service-readmore{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--purple);cursor:pointer;background:none;border:none;padding:0;margin-top:18px;font-family:var(--font);transition:gap .15s;}
.service-readmore:hover{gap:10px;}

/* ── PRODUCT MODAL ── */
.pmodal-overlay{position:fixed;inset:0;background:rgba(14,11,26,.6);backdrop-filter:blur(8px);z-index:3000;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .25s;}
.pmodal-overlay.open{opacity:1;pointer-events:all;}
.pmodal-box{background:white;border-radius:20px;width:100%;max-width:1000px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;transform:translateY(20px);transition:transform .25s;}
.pmodal-overlay.open .pmodal-box{transform:translateY(0);}
.pmodal-head{padding:32px 36px 20px;border-bottom:1px solid var(--gray-100);display:flex;align-items:flex-start;gap:20px;flex-shrink:0;}
.pmodal-icon{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.pmodal-icon svg{width:24px;height:24px;}
.pmodal-head h3{font-size:22px;font-weight:700;margin-bottom:6px;letter-spacing:-.4px;}
.pmodal-eyebrow{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:4px;}
.pmodal-close{width:36px;height:36px;border-radius:10px;border:1px solid var(--gray-200);background:white;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--gray-500);transition:background .15s;flex-shrink:0;margin-left:auto;}
.pmodal-close:hover{background:var(--off-white);}
.pmodal-body{padding:24px 36px 32px;overflow-y:auto;}
.pmodal-body p{font-size:15px;line-height:1.75;color:var(--gray-700);margin-bottom:16px;}
.pmodal-body h4{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--gray-500);margin:24px 0 12px;}
.pmodal-foot{padding:20px 36px;border-top:1px solid var(--gray-100);display:flex;gap:12px;justify-content:flex-end;flex-shrink:0;background:var(--off-white);}
.pmodal-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;}
.pmodal-intro{font-size:15px;line-height:1.75;color:var(--gray-700);margin-bottom:24px;}
.pmodal-checks{display:flex;flex-direction:column;gap:16px;margin-bottom:0;}
.pmodal-check{display:flex;align-items:flex-start;gap:12px;}
.pmodal-check-tick{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:11px;margin-top:2px;}
.pmodal-check-text{font-size:15px;font-weight:600;margin-bottom:2px;color:var(--black);}
.pmodal-check-sub{font-size:13px;color:var(--gray-500);line-height:1.6;}
.pmodal-panel{background:var(--charcoal);border-radius:16px;padding:32px;position:relative;overflow:hidden;}
.pmodal-panel::before{content:'';position:absolute;top:-40px;right:-40px;width:160px;height:160px;background:radial-gradient(circle,rgba(245,87,108,0.25) 0%,transparent 70%);}
.pmodal-panel-label{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;margin-bottom:18px;position:relative;z-index:1;}
.pmodal-layers{display:flex;flex-direction:column;gap:10px;position:relative;z-index:1;}
.pmodal-layer{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);transition:all .2s;}
.pmodal-layer:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);}
.pmodal-layer-num{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:white;flex-shrink:0;}
.pmodal-layer-text{font-size:13px;font-weight:600;color:rgba(255,255,255,.9);}
.pmodal-layer-sub{font-size:11px;color:rgba(255,255,255,.45);margin-top:2px;line-height:1.4;}
.pmodal-meta-strip{display:flex;gap:24px;margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);position:relative;z-index:1;}
.pmodal-meta-strip > div{flex:1;}
.pmodal-meta-strip .label{font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:2px;}
.pmodal-meta-strip .value{font-size:13px;font-weight:600;color:white;}
@media(max-width:900px){.pmodal-grid{grid-template-columns:1fr;gap:32px;}}

/* ── OUTCOMES ── */
.outcomes-section{padding:80px 5%;background:var(--charcoal);position:relative;overflow:hidden;}
.outcomes-section::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 50% 50%,rgba(245,87,108,0.06) 0%,transparent 70%);}
.outcomes-inner{max-width:1200px;margin:0 auto;position:relative;z-index:1;}
.outcomes-section .slabel{color:var(--coral);}
.outcomes-section h2{color:white!important;-webkit-text-fill-color:white!important;margin-bottom:16px;}
.outcomes-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.08);border-radius:var(--rl);overflow:hidden;margin-top:48px;}
.outcome-item{padding:40px 32px;text-align:center;background:rgba(255,255,255,.03);}
.outcome-num{font-size:44px;font-weight:800;letter-spacing:-2px;background:linear-gradient(135deg,var(--coral),var(--lavender));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:8px;}
.outcome-label{font-size:13px;font-weight:500;color:rgba(255,255,255,.5);line-height:1.5;}

/* ── CTA (solutions) ── */
.cta-section{padding:100px 5% 140px;background:var(--purple-deep);text-align:center;position:relative;}
.cta-section::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 50% 0%,rgba(245,87,108,0.12) 0%,transparent 70%);}
.cta-section>*{position:relative;z-index:1;}
.cta-section .slabel{color:rgba(255,255,255,.4);}
.cta-section h2{color:white!important;-webkit-text-fill-color:white!important;max-width:560px;margin:0 auto 20px;}
.cta-section .lead{color:rgba(255,255,255,.6)!important;-webkit-text-fill-color:rgba(255,255,255,.6)!important;margin:0 auto 40px;text-align:center;}
.cta-section a.bp{background:white!important;background-color:white!important;color:var(--purple)!important;-webkit-text-fill-color:var(--purple)!important;margin-bottom:48px!important;}
.cta-section a.bp:hover{background:var(--purple-light)!important;}
.cta-section .bp + *{margin-top:40px!important;}

/* ── FADE-UP ANIMATION ── */
/* Default: visible. Hidden only when JS marks body as ready (avoids elements being permanently invisible if observer script doesn't run). */
.fade-up{opacity:1;transform:none;}
@supports (animation-timeline: view()){
  .fade-up{
    animation:eb-fadeup ease-out both;
    animation-timeline:view();
    animation-range:cover 5% cover 45%;
  }
}
@keyframes eb-fadeup{
  from{opacity:0;transform:translateY(80px) scale(.95);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
body.eb-observe-ready .fade-up{opacity:0;transform:translateY(80px) scale(.95);transition:opacity .8s ease-out,transform .8s ease-out;}
body.eb-observe-ready .fade-up.visible{opacity:1;transform:translateY(0) scale(1);}
@media (prefers-reduced-motion:reduce){
  .fade-up,body.eb-observe-ready .fade-up{opacity:1!important;transform:none!important;animation:none!important;transition:none!important;}
}
/* ==========================================================================
   RESPONSIVE — PAGE-SPECIFIC
   (Shared base/nav/footer responsive lives in edubites-global.css)
   ========================================================================== */
@media (max-width:900px){
  .services-grid{grid-template-columns:1fr;}
  .outcomes-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:768px){
  .sol-hero{padding:calc(var(--nav-h) + 56px) 5% 56px;}
  .sol-hero .hero-actions a.bp,.sol-hero .hero-actions a.bg{width:100%;justify-content:center;}
  .services-section,.outcomes-section{padding:64px 5%;}
  .cta-section{padding:80px 5% 120px!important;}
}
@media (max-width:600px){
  .outcomes-grid{grid-template-columns:1fr;}
}

/* ==========================================================================
   CTA BUTTONS — primary (white bg + text=section bg), secondary (white outline + white text)
   Each section sets --eb-section-bg to its OWN background color so the primary
   button text auto-matches without changing the section background.
   ========================================================================== */
html body .eb-scope .cta-section{--eb-section-bg:#1a1535;}
html body .eb-scope .plat-cta{--eb-section-bg:#1a1535;}
html body .eb-scope .sol-hero{--eb-section-bg:#393D3F;}

html body .eb-scope .cta-section a.bp,
html body .eb-scope .cta-section a.bp:link,
html body .eb-scope .cta-section a.bp:visited,
html body .eb-scope .cta-section a.bp:hover,
html body .eb-scope .cta-section a.bp:focus,
html body .eb-scope .cta-section a.bp:active,
html body .eb-scope .plat-cta a.bp,
html body .eb-scope .plat-cta a.bp:link,
html body .eb-scope .plat-cta a.bp:visited,
html body .eb-scope .plat-cta a.bp:hover,
html body .eb-scope .plat-cta a.bp:focus,
html body .eb-scope .plat-cta a.bp:active,
html body .eb-scope .sol-hero a.bp,
html body .eb-scope .sol-hero a.bp:link,
html body .eb-scope .sol-hero a.bp:visited,
html body .eb-scope .sol-hero a.bp:hover,
html body .eb-scope .sol-hero a.bp:focus,
html body .eb-scope .sol-hero a.bp:active{
  background:#FFFFFF!important;
  background-color:#FFFFFF!important;
  background-image:none!important;
  color:var(--eb-section-bg,#1a1535)!important;
  -webkit-text-fill-color:var(--eb-section-bg,#1a1535)!important;
  border:none!important;
  box-shadow:none!important;
}
html body .eb-scope .cta-section a.bp:hover,
html body .eb-scope .plat-cta a.bp:hover,
html body .eb-scope .sol-hero a.bp:hover{
  background:#F8F8F8!important;
  background-color:#F8F8F8!important;
  transform:translateY(-1px);
}

html body .eb-scope .cta-section a.bg,
html body .eb-scope .cta-section a.bg:link,
html body .eb-scope .cta-section a.bg:visited,
html body .eb-scope .cta-section a.bg:hover,
html body .eb-scope .cta-section a.bg:focus,
html body .eb-scope .cta-section a.bg:active,
html body .eb-scope .plat-cta a.bg,
html body .eb-scope .plat-cta a.bg:link,
html body .eb-scope .plat-cta a.bg:visited,
html body .eb-scope .plat-cta a.bg:hover,
html body .eb-scope .plat-cta a.bg:focus,
html body .eb-scope .plat-cta a.bg:active,
html body .eb-scope .sol-hero a.bg,
html body .eb-scope .sol-hero a.bg:link,
html body .eb-scope .sol-hero a.bg:visited,
html body .eb-scope .sol-hero a.bg:hover,
html body .eb-scope .sol-hero a.bg:focus,
html body .eb-scope .sol-hero a.bg:active{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
  border:1.5px solid #FFFFFF!important;
  box-shadow:none!important;
}
html body .eb-scope .cta-section a.bg:hover,
html body .eb-scope .plat-cta a.bg:hover,
html body .eb-scope .sol-hero a.bg:hover{
  background:rgba(255,255,255,0.10)!important;
  background-color:rgba(255,255,255,0.10)!important;
  transform:translateY(-1px);
}

/* ==========================================================================
   FADE-UP STAGGER — cada filho .fade-up entra um pouco depois do anterior
   ========================================================================== */
@supports (animation-timeline: view()){
  .fade-up:nth-child(1){animation-range:cover 5% cover 45%;}
  .fade-up:nth-child(2){animation-range:cover 10% cover 50%;}
  .fade-up:nth-child(3){animation-range:cover 15% cover 55%;}
  .fade-up:nth-child(4){animation-range:cover 20% cover 60%;}
  .fade-up:nth-child(5){animation-range:cover 25% cover 65%;}
  .fade-up:nth-child(6){animation-range:cover 30% cover 70%;}
  .fade-up:nth-child(n+7){animation-range:cover 35% cover 75%;}
}
body.eb-observe-ready .fade-up:nth-child(1){transition-delay:0ms;}
body.eb-observe-ready .fade-up:nth-child(2){transition-delay:80ms;}
body.eb-observe-ready .fade-up:nth-child(3){transition-delay:160ms;}
body.eb-observe-ready .fade-up:nth-child(4){transition-delay:240ms;}
body.eb-observe-ready .fade-up:nth-child(5){transition-delay:320ms;}
body.eb-observe-ready .fade-up:nth-child(6){transition-delay:400ms;}
body.eb-observe-ready .fade-up:nth-child(n+7){transition-delay:480ms;}

/* Higher-specificity override for secondary button (.bg) — beats .sol-hero .hero-actions a.bg etc. */
html body .eb-scope .cta-section .hero-actions a.bg,
html body .eb-scope .plat-cta .hero-actions a.bg,
html body .eb-scope .sol-hero .hero-actions a.bg,
html body .eb-scope section.cta-section a.bg,
html body .eb-scope section.plat-cta a.bg,
html body .eb-scope section.sol-hero a.bg{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
  border:1.5px solid #FFFFFF!important;
  border-color:#FFFFFF!important;
  box-shadow:none!important;
  opacity:1!important;
}
html body .eb-scope .cta-section .hero-actions a.bg:hover,
html body .eb-scope .plat-cta .hero-actions a.bg:hover,
html body .eb-scope .sol-hero .hero-actions a.bg:hover,
html body .eb-scope section.cta-section a.bg:hover,
html body .eb-scope section.plat-cta a.bg:hover,
html body .eb-scope section.sol-hero a.bg:hover{
  background:rgba(255,255,255,0.10)!important;
  background-color:rgba(255,255,255,0.10)!important;
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
  border-color:#FFFFFF!important;
}/* End custom CSS */