/* Start custom CSS *//* ==========================================================================
   eduBITES — Use Cases page-specific stylesheet
   Self-contained: includes global tokens, header, footer, and page sections.
   /use-cases (index) and the 6 /uc-* pages.
   Contains: uc-hero, uc-grid index, challenge, approach (two variants),
   case story, page-specific CTA, fade-up, and page-specific responsive.
   ========================================================================== */

@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-8272(: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 (uc-* page hero) ── */
.uc-hero{padding:calc(var(--nav-h) + 60px) 5% 80px;background:var(--off-white);position:relative;overflow:hidden;}
.uc-hero .hero-inner{max-width:700px;position:relative;z-index:2;}
.breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:24px;}
.breadcrumb a{font-size:13px;font-weight:500;color:var(--gray-500);text-decoration:none;transition:color .15s;}
.breadcrumb a:hover{color:var(--purple);}
.breadcrumb span{font-size:13px;color:var(--gray-400);}
.breadcrumb .current{font-size:13px;font-weight:500;color:var(--black);}
.uc-hero h1{margin-bottom:20px;}
.uc-hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--coral) 0%,var(--lavender) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}

/* ── USE CASES INDEX (use-cases.html) ── */
.uc-grid-section{padding:80px 5%;background:var(--white);}
.uc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.uc-card{background:white;border:1px solid var(--gray-100);border-radius:var(--rl);padding:32px;cursor:pointer;transition:box-shadow .2s,transform .2s;display:flex;flex-direction:column;text-decoration:none;color:inherit;border-top:3px solid transparent;}
.uc-card:hover{box-shadow:0 8px 32px rgba(50,40,103,.08);transform:translateY(-3px);}
.uc-card-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
.uc-card-icon svg{width:22px;height:22px;}
.uc-card h4{font-size:17px;font-weight:700;margin-bottom:8px;color:var(--black);}
.uc-card p{font-size:14px;color:var(--gray-500);line-height:1.65;flex:1;}
.uc-card-link{margin-top:18px;padding-top:14px;border-top:1px solid var(--gray-100);font-size:12px;font-weight:600;letter-spacing:.5px;color:var(--purple);display:flex;align-items:center;gap:6px;}

/* ── CHALLENGE ── */
.challenge-section{padding:100px 5%;background:var(--white);}
.challenge-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;}
.challenge-text h2{margin-bottom:20px;}
.challenge-text p{color:var(--gray-500);font-size:15px;line-height:1.8;}
.stat-cards{display:flex;flex-direction:column;gap:16px;}
.stat-card{background:var(--off-white);border:1px solid var(--gray-100);border-radius:var(--rl);padding:28px 32px;display:flex;align-items:center;gap:24px;}
.stat-num{font-size:38px;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;flex-shrink:0;min-width:100px;}
.stat-card p{font-size:14px;color:var(--gray-500);line-height:1.6;margin:0;}

/* ── APPROACH ──
   Two layout variants are supported:
     a) .pillar-grid — 3 columns (Solutions / Platform / Studio) used by uc-onboarding
     b) .approach-steps — vertical numbered steps used by the other 5 uc-* pages
*/
.approach-section{padding:100px 5%;background:var(--off-white);position:relative;overflow:hidden;}
.approach-section .section-header{text-align:center;max-width:680px;margin:0 auto 56px;}

/* Variant b — numbered steps */
.approach-steps{display:flex;flex-direction:column;gap:20px;margin-top:56px;}
.approach-step{background:white;border:1px solid var(--gray-100);border-radius:var(--rl);padding:36px 40px;display:grid;grid-template-columns:160px 1fr;gap:32px;align-items:start;border-left:4px solid transparent;}
.step-number{font-size:32px;font-weight:800;letter-spacing:-1.5px;color:var(--gray-400);line-height:1;margin-bottom:14px;}
.step-pills{display:flex;flex-wrap:wrap;gap:6px;}
.pillar-pill{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:4px 10px;border-radius:100px;white-space:nowrap;display:inline-block;}
.pp-solutions{background:var(--coral-light);color:var(--coral);}
.pp-platform{background:var(--purple-light);color:var(--purple);}
.pp-studio{background:var(--lavender-light);color:#c855e8;}
.step-content h4{font-size:16px;font-weight:600;margin-bottom:8px;color:var(--black);}
.step-content p{font-size:14px;color:var(--gray-500);line-height:1.7;}
@media(max-width:900px){.approach-step{grid-template-columns:1fr;}}

/* Variant a — pillar grid */
.pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px;}
.pillar-col{background:white;border:1px solid var(--gray-100);border-radius:var(--rl);overflow:hidden;display:flex;flex-direction:column;}
.pillar-col-head{padding:28px 26px 24px;border-bottom:1px solid var(--gray-100);}
.pillar-col-head .icon-wrap{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.pillar-col-head h3{font-size:18px;font-weight:700;letter-spacing:-.3px;margin:0;color:var(--black);}
.pillar-col-head .subline{font-size:11px;color:var(--gray-500);margin-top:6px;letter-spacing:1px;text-transform:uppercase;font-weight:600;}
.pillar-col.solutions{border-top:3px solid var(--coral);}
.pillar-col.solutions .icon-wrap{background:var(--coral-light);color:var(--coral);}
.pillar-col.platform{border-top:3px solid var(--purple);}
.pillar-col.platform .icon-wrap{background:var(--purple-light);color:var(--purple);}
.pillar-col.studio{border-top:3px solid #c855e8;}
.pillar-col.studio .icon-wrap{background:var(--lavender-light);color:#c855e8;}
.pillar-items{list-style:none;padding:6px;margin:0;flex:1;display:flex;flex-direction:column;}
.pillar-item{padding:18px 20px;border-radius:10px;}
.pillar-item + .pillar-item{border-top:1px solid var(--gray-100);}
.pillar-item-head{display:flex;align-items:baseline;gap:10px;margin-bottom:6px;}
.pillar-item .num{font-size:11px;font-weight:800;letter-spacing:1px;color:var(--gray-400);flex-shrink:0;}
.pillar-item .title{font-size:14px;font-weight:600;color:var(--black);line-height:1.35;}
.pillar-item p{font-size:13px;color:var(--gray-500);line-height:1.6;margin:0;}
.pillar-empty{padding:36px 24px;text-align:center;color:var(--gray-400);font-size:13px;font-style:italic;flex:1;display:flex;align-items:center;justify-content:center;}

/* ── CASE STORY ── */
.case-section{padding:100px 5%;background:var(--charcoal);position:relative;overflow:hidden;}
.case-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%);}
.case-inner{max-width:1200px;margin:0 auto;position:relative;z-index:1;}
.case-section .slabel{color:var(--coral);}
.case-profile{display:flex;gap:24px;flex-wrap:wrap;margin-bottom:40px;}
.case-meta{font-size:12px;font-weight:500;color:rgba(255,255,255,.4);padding:6px 16px;border-radius:100px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);}
.case-quote{font-size:22px;font-weight:500;color:white;line-height:1.6;letter-spacing:-.3px;max-width:800px;margin-bottom:16px;position:relative;padding-left:0;}
.case-quote::before{content:'\201C';position:absolute;top:-20px;left:-10px;font-size:80px;color:rgba(245,87,108,.2);font-family:Georgia,serif;line-height:1;}
.case-author{display:flex;align-items:center;gap:12px;margin-bottom:48px;}
.case-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--coral),var(--lavender));display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:white;flex-shrink:0;}
.case-author-name{font-size:14px;font-weight:600;color:white;}
.case-author-role{font-size:12px;color:rgba(255,255,255,.5);}
.case-results{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.08);border-radius:var(--rl);overflow:hidden;}
.case-result{padding:36px 28px;text-align:center;background:rgba(255,255,255,.03);}
.case-result-num{font-size:40px;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;}
.case-result-label{font-size:13px;font-weight:500;color:rgba(255,255,255,.5);line-height:1.5;}

/* ── CTA ── */
.cta-section{padding:120px 5% 160px!important;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:1024px){
  .uc-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:900px){
  .challenge-grid,.pillar-grid{grid-template-columns:1fr;}
  .case-results{grid-template-columns:1fr;}
}
@media (max-width:768px){
  .uc-hero,.challenge-section,.approach-section,.case-section{padding:64px 5%;}
  .cta-section{padding:80px 5% 120px!important;}
  .uc-grid{grid-template-columns:1fr;}
}

/* ==========================================================================
   FADE-UP OBSERVER SCRIPT TARGET
   The fade-up observer is included once in 06-cta.html (last section).
   ========================================================================== */

/* ==========================================================================
   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 */