:root{
  --sage:#F1FAEC;
  --green:#16a34a;
  --text:#111;
  --muted:#444;
  --ring:#16a34a33;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial;color:var(--text);background:var(--sage)}
a{color:inherit;text-decoration:none}

header{text-align:center;padding:42px 16px 10px}
header img{width:min(60vw,240px);max-width:240px;margin:0 auto 6px;display:block}
header h1{margin:4px 0 10px;font-size:clamp(28px,4.6vw,54px);font-weight:900;color:var(--green);-webkit-text-stroke:2px #000;letter-spacing:2px}
.slogan{font-style:italic;font-weight:600;text-align:center;font-size:clamp(16px,1.8vw,22px);margin:6px auto 24px;max-width:900px}

.container{padding:8px 18px 40px}

/* Bubbles */
.bubble{
  position:relative;background:#fff;border-radius:50%;
  width:240px;height:240px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:22px;margin:0 auto;
  box-shadow:0 10px 30px rgba(0,0,0,.10), inset 0 0 0 2px rgba(0,0,0,.06);
  transition: transform .35s ease, box-shadow .35s ease, background .35s ease, filter .35s ease;
}
.bubble h3{margin:8px 0 6px;font-size:1.05em;font-weight:900}
.bubble p{margin:0;font-size:.95em;color:var(--muted);line-height:1.35}
.bubble:hover{transform:translateY(-10px) scale(1.06);background:#DFF5E5;box-shadow:0 20px 50px rgba(22,163,74,.35), inset 0 0 0 4px rgba(22,163,74,.25);filter:saturate(1.1)}
.bubble:hover h3{color:var(--green)}
.bubble img.icon{width:64px;height:64px;object-fit:contain;display:block}

/* Version 1: grid */
.version1{margin-bottom:70px}
.version1 .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;max-width:1200px;margin:0 auto}

/* Version 3: timeline */
.version3{padding:28px 10px 40px;margin-bottom:70px}
.version3 .v3-wrap{display:flex;align-items:center;gap:22px;width:max-content;margin:0 auto}
.version3 .v3-brand{width:160px;height:160px;min-width:160px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;border-radius:50%;box-shadow:0 10px 30px rgba(0,0,0,.10), inset 0 0 0 2px rgba(0,0,0,.06)}
.version3 .v3-brand img{width:60%;height:auto;object-fit:contain;margin-bottom:6px}
.version3 .v3-brand .brand-title{font-weight:900;font-size:.9em;color:var(--green);-webkit-text-stroke:1px #000;letter-spacing:1px}
.version3 .timeline{display:flex;gap:22px;width:max-content}
.version3 .bubble{width:160px;height:160px;min-width:160px;padding:14px}
.version3 .bubble img.icon{width:44px;height:44px}
.version3 .bubble h3{font-size:.92em}
.version3 .bubble p{display:none}

/* Footer */
footer{text-align:center;padding:22px 10px 28px;color:#222;font-size:14px;opacity:.85}