/* ===== Tokens ===== */
:root{
  --bg: #EAF7EF;
  --bg-2: #F3ECFB;
  --ink: #332C42;
  --ink-dim: rgba(51,44,66,0.68);
  --mint: #6FCB9B;
  --mint-2: #9EE6BE;
  --lilac: #B79AE3;
  --lilac-2: #D8C6F2;
  --pink: #FFB4C6;
  --card: #FFFFFF;
  --line: rgba(51,44,66,0.1);

  --display: "Baloo 2", system-ui, sans-serif;
  --body: "Manrope", system-ui, sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;

  --wrap: 1180px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background:
    radial-gradient(circle, rgba(255,255,255,0.9) 2px, transparent 2.4px),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 45%, var(--bg) 100%);
  background-size: 34px 34px, 100% 100%;
  background-attachment: local, fixed;
  color: var(--ink);
  font-family: var(--body);
  line-height: 1.55;
  overflow-x: hidden;
  position: relative;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.eyebrow{
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--mint);
  margin: 0 0 0.8rem;
}
.eyebrow--dark{ color: rgba(51,44,66,0.6); }

.section-title{
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  line-height: 1.12;
  margin: 0 0 1.1rem;
  color: var(--ink);
}

/* ===== Drifting haze background ===== */
.haze{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.cloud{
  position:absolute; border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,0.9), rgba(255,255,255,0) 70%);
  filter: blur(6px);
  animation: drift 26s ease-in-out infinite;
}
.cloud--1{ width:340px; height:340px; top:-6%; left:8%; animation-delay:0s; }
.cloud--2{ width:260px; height:260px; top:30%; right:4%; animation-delay:-9s; background: radial-gradient(circle, rgba(216,198,242,0.7), rgba(216,198,242,0) 70%); }
.cloud--3{ width:300px; height:300px; bottom:0%; left:30%; animation-delay:-17s; background: radial-gradient(circle, rgba(158,230,190,0.6), rgba(158,230,190,0) 70%); }
@keyframes drift{
  0%, 100%{ transform: translate(0,0); }
  50%{ transform: translate(3%, 4%); }
}

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  font-family: var(--body); font-weight:800; font-size:0.95rem;
  padding: 0.85rem 1.6rem; border-radius: 999px;
  border: 2px solid transparent; white-space: nowrap;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn--mint{ background: linear-gradient(180deg, var(--mint-2), var(--mint)); color: #17321F; box-shadow: 0 10px 24px -8px rgba(111,203,155,0.7); }
.btn--mint:hover{ box-shadow: 0 14px 30px -8px rgba(111,203,155,0.8); }
.btn--x{ background: #fff; color: #0b0b0b; box-shadow: 0 10px 24px -10px rgba(51,44,66,0.35); }
.btn--small{ padding: 0.55rem 1.2rem; font-size: 0.85rem; }
.btn--big{ padding: 1.05rem 2.1rem; font-size: 1.05rem; }
.btn--dark{ background: var(--card); color: var(--ink); box-shadow: 0 10px 24px -10px rgba(51,44,66,0.3); }
.icon-x{ width: 1rem; height: 1rem; flex: none; }

/* ===== Nav ===== */
.nav{
  position: sticky; top:0; z-index: 400;
  display:flex; align-items:center; gap: 2rem;
  padding: 1.1rem clamp(1.2rem, 4vw, 3rem);
  background: rgba(234,247,239,0.75);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav__logo{
  font-family: var(--display); font-weight:800; font-size:1.6rem; color: var(--ink);
  margin-right: auto; display:flex; align-items:center; gap:0.3rem;
}
.nav__logo .dot{ color: var(--lilac); font-size: 1.3rem; }
.nav__links{ display:flex; gap: 1.8rem; font-weight:700; font-size:0.92rem; color: var(--ink-dim); }
.nav__links a:hover{ color: var(--mint); }
.nav__burger{
  display:none; flex-direction:column; gap:5px; width:26px; padding:0;
  background:none; border:none; cursor:pointer;
}
.nav__burger span{ display:block; height:2px; background: var(--ink); border-radius:2px; }

@media (max-width: 760px){
  .nav__links{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; background: var(--bg);
    border-bottom: 1px solid var(--line);
  }
  .nav__links a{ padding: 1rem 1.4rem; border-top: 1px solid var(--line); }
  .nav .btn--small{ display:none; }
  .nav__burger{ display:flex; }
}

/* ===== Hero ===== */
.hero{
  position: relative; z-index:1;
  max-width: 1200px; margin: 0 auto;
  display:flex; align-items:center; justify-content:center; gap: clamp(2rem, 6vw, 5rem);
  flex-wrap: wrap;
  padding: clamp(1rem, 3vw, 2rem) clamp(1.2rem, 5vw, 4rem) clamp(3rem, 7vw, 6rem);
  text-align:center;
  flex-direction: column;
}
.hero__banner{
  position:relative; z-index:1;
  width: 100%; max-height: min(52vh, 480px); overflow:hidden;
  background: var(--mint-2);
}
.hero__banner img{
  width:100%; height:100%; object-fit: cover; object-position: center 30%;
  -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 96%);
  mask-image: linear-gradient(to bottom, black 55%, transparent 96%);
}
.hero__banner::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background: linear-gradient(to bottom, transparent 45%, var(--bg) 94%);
}

.hero__content{ position:relative; z-index:1; max-width: 620px; }
.hero__tagline{
  font-family: var(--display); font-weight:800;
  font-size: clamp(2.2rem, 5.2vw, 3.6rem);
  line-height: 1.08; margin: 0 0 1.1rem; color: var(--ink);
}
.hero__sub{ color: var(--ink-dim); font-size: 1.04rem; margin: 0 0 2rem; }
.hero__cta{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ===== Marquee ===== */
.marquee{
  background: var(--lilac-2); color: var(--ink);
  overflow: hidden; white-space: nowrap;
  padding: 0.8rem 0;
  position: relative; z-index: 5;
}
.marquee__track{
  display:inline-flex;
  font-family: var(--mono); font-weight:700; font-size: 0.92rem; letter-spacing:0.04em;
  animation: scroll-left 26s linear infinite;
}
@keyframes scroll-left{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ===== About ===== */
.about{
  position:relative; z-index:1; overflow: hidden;
  max-width: var(--wrap); margin: 0 auto;
  display:grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 6vw, 5rem);
  align-items:center;
  padding: clamp(4.5rem, 9vw, 7rem) clamp(1.2rem, 4vw, 3rem);
}
.about::before, .about::after{
  content:""; position:absolute; z-index:0; border-radius:50%; filter: blur(4px); pointer-events:none;
}
.about::before{
  width:380px; height:380px; top:-10%; right:-8%;
  background: radial-gradient(circle, rgba(183,154,227,0.45), rgba(183,154,227,0) 70%);
}
.about::after{
  width:280px; height:280px; bottom:-14%; left:-6%;
  background: radial-gradient(circle, rgba(255,180,198,0.4), rgba(255,180,198,0) 70%);
}
.about__art, .about__text{ position:relative; z-index:1; }
.about__art{ display:flex; justify-content:center; }
.blob-frame{
  width: min(100%, 340px); background: var(--card);
  border-radius: 62% 38% 45% 55% / 55% 45% 55% 45%;
  padding: 1.4rem; box-shadow: 0 30px 50px -20px rgba(51,44,66,0.28);
  transition: border-radius 0.6s ease, transform 0.4s ease;
}
.blob-frame img{ border-radius: 55% 45% 40% 60% / 50% 55% 45% 50%; }
.about__art:hover .blob-frame{ border-radius: 45% 55% 55% 45% / 45% 55% 45% 55%; transform: scale(1.02); }
.about__text p{ color: var(--ink-dim); font-size:1.02rem; margin: 0 0 1rem; max-width: 46ch; }

.stats{
  display:grid; grid-template-columns: repeat(2, minmax(140px,1fr));
  gap: 0.9rem; margin: 1.6rem 0 0; padding: 1.3rem;
  background: var(--card); border-radius: 20px;
  box-shadow: 0 20px 40px -20px rgba(51,44,66,0.25);
}
.stats__item dt{
  font-family: var(--mono); font-size: 0.7rem; text-transform:uppercase; letter-spacing:0.08em;
  color: var(--ink-dim); margin: 0 0 0.25rem;
}
.stats__item dd{
  font-family: var(--display); font-weight:700; font-size: 1.1rem; margin:0; color: var(--mint);
}

@media (max-width: 860px){
  .about{ grid-template-columns: 1fr; text-align:center; }
  .about__text p{ margin-left:auto; margin-right:auto; }
  .stats{ grid-template-columns: repeat(2, 1fr); }
  .about__art{ order: -1; }
}

/* ===== Blob gallery ===== */
.blobs{ position:relative; z-index:1; overflow:hidden; max-width: 100%; margin: 0 auto; padding: clamp(3rem, 8vw, 5rem) clamp(1.2rem, 4vw, 3rem) clamp(6rem, 10vw, 9rem); }
.blobs::before, .blobs::after{
  content:""; position:absolute; z-index:0; border-radius:50%; filter: blur(4px); pointer-events:none;
}
.blobs::before{
  width:420px; height:420px; top:4%; left:-10%;
  background: radial-gradient(circle, rgba(158,230,190,0.5), rgba(158,230,190,0) 70%);
}
.blobs::after{
  width:340px; height:340px; bottom:-8%; right:-8%;
  background: radial-gradient(circle, rgba(183,154,227,0.4), rgba(183,154,227,0) 70%);
}
.blobs__head, .blobs__grid{ position:relative; z-index:1; }
.blobs__head{ text-align:center; max-width: 640px; margin: 0 auto 3rem; }
.blobs__head .eyebrow{ text-align:center; }

.blobs__grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2rem;
  max-width: var(--wrap); margin: 0 auto;
}
.blob-card{
  --rot: 0deg;
  background: var(--card); border-radius: 28px;
  padding: 1rem 1rem 1.4rem; text-align:center;
  box-shadow: 0 24px 44px -22px rgba(51,44,66,0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.blob-card:hover{ transform: rotate(0deg) translateY(-6px) !important; box-shadow: 0 30px 50px -20px rgba(51,44,66,0.35); }
.blob-card.reveal{ transform: rotate(var(--rot)) translateY(28px); opacity:0; transition: transform 0.7s ease, opacity 0.7s ease, box-shadow 0.3s ease; }
.blob-card.reveal.is-visible{ transform: rotate(var(--rot)) translateY(0); opacity:1; }
.blobs__grid .blob-card:nth-child(1){ --rot: -1.4deg; }
.blobs__grid .blob-card:nth-child(2){ --rot: 1deg; }
.blobs__grid .blob-card:nth-child(3){ --rot: -0.8deg; }
.blob-card__img{
  border-radius: 55% 45% 42% 58% / 50% 55% 45% 50%; overflow:hidden; margin-bottom: 1rem;
  background: var(--bg);
}
.blob-card__img img{ width:100%; height: 220px; object-fit: contain; }
.blob-card__tag{
  display:inline-block; font-family: var(--mono); font-size: 0.68rem; font-weight:700; letter-spacing: 0.06em;
  background: var(--mint-2); color: #17321F;
  padding: 0.25rem 0.65rem; border-radius: 999px; margin-bottom: 0.7rem;
}
.blob-card__caption{ font-size: 0.94rem; color: var(--ink-dim); margin:0; }

/* ===== Join ===== */
.join{ position:relative; z-index:1; background: var(--lilac); padding: clamp(4.5rem, 9vw, 7rem) 1.2rem; }
.join__title{
  font-family: var(--display); font-weight:800; color: var(--ink);
  font-size: clamp(2.4rem, 6vw, 4rem); line-height:1.08; margin: 0 0 2.2rem;
}
.join__inner{ max-width: 640px; margin: 0 auto; text-align:center; }
.join__links{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ===== Footer ===== */
.footer{
  position:relative; z-index:1;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:0.5rem;
  padding: 1.6rem clamp(1.2rem, 4vw, 3rem);
  font-family: var(--mono); font-size: 0.78rem; color: var(--ink-dim);
}

/* ===== Scroll reveal ===== */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-visible{ opacity:1; transform: translateY(0); }

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  .cloud, .wisp, .hero__puff{ animation:none !important; }
  .blob-card, .blob-frame{ transition:none !important; }
  .reveal, .blob-card.reveal{ opacity:1; transform:none; transition:none; }
}