/* =========================================
   GLOBAL RESET
========================================= */

/* Scope reset to main wrapper only */

.main-wrapper,
.main-wrapper *,
.main-wrapper *::before,
.main-wrapper *::after{
  box-sizing:border-box;
}

.main-wrapper{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:#f5f6f8;
  color:#1a1a1a;
  line-height:1.5;
}

/* =========================================
   HERO PANEL
========================================= */

.hero-panel{
  background:linear-gradient(135deg,#4ade80 0%, #22c55e 100%);
  padding:10px 10px;
  position:relative;
  overflow:hidden;
}

.hero-inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  align-items:center;
  gap:40px;
}

/* Text */

.hero-text{
  flex:1;
  color:#fff;
}

.hero-text h1{
  font-size:44px;
  line-height:1.1;
  margin:0 0 20px 0;
  font-weight:800;
}

.hero-text p{
  font-size:18px;
  opacity:0.95;
  margin-bottom:28px;
  max-width:520px;
}

/* Buttons */

.hero-cta{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

.btn-primary{
  background:#fff;
  color:#16a34a;
  padding:14px 22px;
  border-radius:8px;
  text-decoration:none;
  font-weight:600;
  transition:.2s;
}

.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(0,0,0,.15);
}

.btn-secondary{
display:inline-block;
padding:10px 18px;
background:#ffffff;
color:#0f766e;   /* dark green text */
border:2px solid #0f766e;
border-radius:6px;
font-weight:600;
text-decoration:none;
}

/* Floating Cards */

.hero-art{
  flex:1;
  position:relative;
  height:200px;
}

.floating-card{
  position:absolute;
  width:90px;
  height:90px;
  background:#fff;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:34px;
  font-weight:700;
  color:#16a34a;
  box-shadow:0 12px 30px rgba(0,0,0,.15);
  animation:float 6s ease-in-out infinite;
}

.card-1{ top:0; left:40px; }
.card-2{ top:80px; left:160px; }
.card-3{ top:20px; left:280px; }

@keyframes float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-14px); }
}

/* =========================================
   EVOLUTION INTRO
========================================= */

.evolution-intro{
  padding:70px 20px 10px;
}

.evo-inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
}

.evo-inner h2{
  font-size:32px;
  margin:0 0 10px;
}

.evo-inner p{
  font-size:18px;
  opacity:.8;
  max-width:900px;
}

/* =========================================
   MAIN WRAPPER
========================================= */

.main-wrapper{
  max-width:1200px;
  margin:30px auto 60px;
  padding:0 24px;
}

.widget-stack{
  display:flex;
  flex-direction:column;
  gap:26px;
}

/* =========================================
   EVOLUTION STAGES
========================================= */

.evo-stage{
  background:#fff;
  padding:26px;
  border-radius:12px;
  box-shadow:0 6px 20px rgba(0,0,0,.05);
}

.evo-stage h3{
  margin:0 0 10px;
  font-size:22px;
}

.evo-desc{
  opacity:.8;
}

/* Pros / Cons */

.pros-cons{
  display:flex;
  gap:40px;
  margin-top:14px;
  flex-wrap:wrap;
}

.pros-cons strong{
  display:block;
  margin-bottom:6px;
}

.pros-cons ul{
  margin:0;
  padding-left:18px;
}

/* Highlight stages */

.highlight{
  border-left:6px solid #22c55e;
}

.final-stage{
  border-left:6px solid #16a34a;
}

/* Lists */

.complexity-list{
  margin:12px 0;
  padding-left:20px;
}

blockquote{
  font-size:20px;
  font-weight:600;
  margin:16px 0;
}

/* =========================================
   WIDGET ROWS (REWORKED)
========================================= */

/* Base shared styling */

.widget-row{
  width:100%;
  background:#4ade80; /*#fff*/
  border-radius:12px;
  padding:7px;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  box-sizing:border-box;
}

/* BASIC WIDTH */

.widget-basic{
  max-width:900px;
  margin:0 auto;
}

/* INTERMEDIATE WIDTH */

.widget-intermediate{
  max-width:400px;
  margin:0 auto;
}

/* ADVANCED WIDTH */

.widget-advanced{
  max-width:600px;
  margin:0 auto;
}

/* OPTIONAL FULL BLEED VARIANT */

.widget-full-bleed{
  width:100vw;
  margin-left:calc(50% - 50vw);
}

/* =========================================
   FOOTER
========================================= */

.site-footer{
  background:#000;
  color:#fff;
  width:100%;
}

.site-footer .footer-inner{
  max-width:1200px;
  margin:0 auto;
  padding:18px 24px;
  font-size:14px;
}

/* =========================================
   MOBILE
========================================= */

@media (max-width:900px){

  .hero-inner{
    flex-direction:column;
    text-align:center;
  }

  .hero-text h1{
    font-size:34px;
  }

  .hero-text p{
    margin-left:auto;
    margin-right:auto;
  }

  .hero-art{
    height:140px;
  }

}

@media (max-width:768px){

  .pros-cons{
    flex-direction:column;
    gap:18px;
  }

}