:root{
  --primary:#FF6B6B;     /* Coral Pink */
  --secondary:#2EC4B6;   /* Bermuda Turquoise */
  --ink:#102A43;
  --bg:#F7F9FB;
  --card:#FFFFFF;
}

*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--ink);line-height:1.6}
h1,h2,h3{font-family:'Poppins',sans-serif}

/* HERO */
.hero{
  color:var(--primary); text-align:center; padding:4rem 1.5rem 3.2rem;
}
.logo{max-width:220px;height:auto;margin-bottom:1rem}
.hero-title{font-size:2rem;margin:.25rem 0}
.hero-sub{opacity:.95}
.cta-btn{
  margin-top:1rem; display:inline-block; text-decoration:none;
  background:var(--secondary); color:#fff; font-weight:700; padding:.9rem 1.5rem; border-radius:10px;
  transition:transform .2s ease, filter .2s ease;
}
.cta-btn:hover{transform:translateY(-2px);filter:brightness(.95)}

/* SECTIONS */
section{padding:3rem 1.2rem;max-width:1150px;margin:auto}
.section-head{max-width:760px;margin:0 auto 1.25rem;text-align:center}
.section-head h2{color:var(--primary);margin-bottom:.25rem}

/* ===== UNIFIED GRID BEHAVIOR (ALL IMAGE CARD SECTIONS) ===== */
.story-grid,
.ecosystem-grid{
  display:grid;
  gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));  /* match across sections */
}
/* On desktop, lock to 4 equal columns so all cards match top section width */
@media (min-width:1024px){
  .story-grid,
  .ecosystem-grid{
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    justify-content:center; /* center the whole grid */
  }
}


/* ===== UNIFIED CARD STYLES (IMAGE + CAPTION BOX) ===== */
.card,
.ecosystem-card{
  background:var(--card);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  transition:transform .2s ease, box-shadow .2s ease;
  text-align:center;
}
.card:hover,
.ecosystem-card:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 18px rgba(0,0,0,.1);
}
.card figcaption,
.ecosystem-card figcaption{
  padding:1rem;
}

/* Keep your alt background for the middle band */
.story.alt{background:transparent;}

/* ECOSYSTEM STRIP BG ONLY (layout now unified above) */
.ecosystem{background:transparent;}

/* ===== IMAGE FRAME (CONSISTENT HEIGHT + EDGE‑TO‑EDGE) ===== */
.media{
  width:100%;
  height:360px;                 /* match top section box height */
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-bottom:4px solid var(--primary);
}
.media img{
  width:100%;
  height:100%;
  object-fit:cover;             /* fill box, no white borders */
  object-position:center;
  display:block;
}

@media (max-width:640px){
  .media{height:300px;}
}
@media (min-width:1200px){
  .media{height:400px;}
}

/* HOW IT WORKS */
.hiw{text-align:center}
.hiw h2{color:var(--primary);margin-bottom:1rem}
.steps{
  display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; list-style:none; padding:0; margin-top:.5rem
}
.steps li{
  background:#fff; padding:1rem 1.1rem; border-radius:10px; min-width:210px; box-shadow:0 2px 6px rgba(0,0,0,.05)
}
.steps i{color:var(--secondary); margin-right:.5rem}

/* PLANS */
.plans{text-align:center}
.pricing{
  display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:.5rem
}
.price-card{
  background:#fff; border-radius:12px; padding:1.5rem; box-shadow:0 2px 8px rgba(0,0,0,.06); text-align:center;
  transition:transform .2s ease
}
.price-card:hover{transform:translateY(-4px)}
.price-card i{font-size:2rem; color:var(--primary); margin-bottom:.5rem}
.price-card h3{margin-bottom:.25rem}
.price-card .price{font-weight:700; margin:.25rem 0 1rem}
.price-card ul{list-style:none; padding:0}
.price-card.highlight{outline:3px solid var(--primary)}

/* SIGNUP */
.signup{text-align:center}
.form{margin-top:.5rem}
.input{
  padding:.85rem; width:min(270px,85vw); border-radius:10px; border:1px solid #cdd6df; outline:none; margin-right:.5rem
}
.btn{
  padding:.9rem 1.2rem; background:var(--primary); color:#fff; border:none; border-radius:10px; cursor:pointer;
}

/* FOOTER */
footer{background:var(--ink);color:#fff;text-align:center;padding:1.4rem;font-size:.95rem}

/* Global fixed background image layer */
:root{ --bg-opacity:1; }

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:url("../images/background.png") center/cover no-repeat;
  opacity:.30; /* Always 10% */
  pointer-events:none;
}

/* Transparent hero so background shows */
.hero{ background:transparent; position:relative; }