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

  /* Scoped styles to avoid conflicts with global Webflow CSS */
  .welo-scope{
    --dark-start:#000000;
    --dark-end:#202023;
    --text:#E9EDF3;
    --muted:#9AA3AE;
    --divider:rgba(255,255,255,0.08);
    --ease:cubic-bezier(.25,.8,.25,1);
    --t-med:900ms;
    --overlap:-40px;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }
  @media (max-width:1200px){ .welo-scope{ --overlap:-34px; } }
  @media (max-width:900px){  .welo-scope{ --overlap:-28px; } }
  @media (max-width:640px){  .welo-scope{ --overlap:-20px; } }

  .welo-scope *{ box-sizing:border-box; }

  .welo-scope .container{
    max-width:1250px;
    margin:0 auto;
    padding-left:24px;
    padding-right:24px;
  }
  @media (max-width:991px){
    .welo-scope .container{ padding-left:5%; padding-right:5%; }
  }

  /* HERO */
  .welo-scope .hero{ margin-top:28px; }
  .welo-scope .hero-card{
    position:relative;
    border-radius:15px;
    overflow:hidden;
    background:#111;
    aspect-ratio:21/9;
    max-height:min(70vh,720px);
  }
  @media (max-width:640px){
    .welo-scope .hero-card{ aspect-ratio:4/5; max-height:none; }
  }
  .welo-scope .hero-card picture,
  .welo-scope .hero-card img{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover; object-position:center;
    display:block;
  }

  /* DARK SECTION */
  .welo-scope .dark-section{
    background:
      radial-gradient(900px 500px at 0% 30%, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 60%),
      linear-gradient(180deg,var(--dark-start),var(--dark-end));
    margin-top: var(--overlap);
    padding:96px 0;
    color:var(--text);
    position:relative;
    z-index:1;
    animation: drift 32s ease-in-out infinite alternate;
  }
  @keyframes drift{ to{ background-position: 2% 32%, 0% 100%; } }

  /* Force colors inside dark section */
  .welo-scope .dark-section,
  .welo-scope .dark-section *{ color:var(--text); }
  .welo-scope .dark-section .eyebrow,
  .welo-scope .dark-section .desc{ color:var(--muted) !important; }
  .welo-scope .dark-section .title,
  .welo-scope .dark-section .figure,
  .welo-scope .dark-section .desc-text{ color:var(--text) !important; }

  @media (min-width:900px){
    .welo-scope .dark-section .stat:not(:last-child){
      border-right:1px solid var(--divider) !important;
    }
  }

  /* DESCRIPTION */
  .welo-scope .desc-block{
    max-width:560px;
    display:flex; flex-direction:column; align-items:flex-start;
    gap:20px; margin-bottom:64px;
  }
  @media (min-width:900px){ .welo-scope .desc-block{ padding-left:24px; } }
  .welo-scope .desc-icon{
    width:60px; height:60px; border-radius:12px;
    background:rgba(255,255,255,0.08);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 1px 0 rgba(255,255,255,0.06) inset, 0 6px 18px rgba(0,0,0,0.28);
  }
  /* PNG logo: keep aspect ratio, no stretching */
  .welo-scope .desc-icon img{
    height:34px;
    width:auto;
    display:block;
    image-rendering:auto;
  }
  .welo-scope .desc-text{
    margin:0;
    font-size:28px; line-height:1.35; font-weight:600; letter-spacing:.01em; text-align:left;
  }
  @media (max-width:991px){ .welo-scope .desc-text{ font-size:22px; line-height:1.4; } }
  .welo-scope .br-desktop{ display:block; }
  @media (max-width:991px){ .welo-scope .br-desktop{ display:none; } }

  /* STATS */
  .welo-scope .stats-grid{
    display:grid; grid-template-columns:1fr; gap:48px; align-items:start; text-align:left;
  }
  @media (min-width:900px){
    .welo-scope .stats-grid{ grid-template-columns:repeat(3,1fr); gap:32px; }
    .welo-scope .stat{ padding:0 24px; }
  }
  .welo-scope .eyebrow{
    font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:600; margin:0 0 12px;
  }
  .welo-scope .figure{ font-weight:800; line-height:1; margin:0 0 8px; font-size:56px; }
  @media (min-width:900px){ .welo-scope .figure{ font-size:64px; } }
  .welo-scope .title{ margin:0 0 16px; font-weight:600; font-size:16px; opacity:.9; }
  .welo-scope .desc{ margin:0; line-height:1.6; font-size:15px; max-width:36ch; }

  /* REVEAL */
  .welo-scope .reveal{
    opacity:0; transform:translateY(4px);
    transition:opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
    transition-delay:var(--d,0ms);
    will-change:opacity,transform;
  }
  .welo-scope .reveal.in{ opacity:1; transform:none; }

  /* Show in Webflow Editor without JS */
  .w-editor .welo-scope .reveal{ opacity:1 !important; transform:none !important; }