:root{
  --bg:#ffffff;
  --text:#0f172a;
  --muted:rgba(15,23,42,.7);
  --yellow:#facc15;
  --green:#22c55e;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow:hidden;
}

.wrap{
  min-height:100vh;
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap:24px;
  align-items:center;
  padding:clamp(18px, 3vw, 44px);
}

/* ✅ Mobile = text first, mascot under it */
@media (max-width: 900px){
  .wrap{
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 22px;
  }

  /* make sure mascot section comes AFTER text */
  .left{ order: 1; }
  .right{ order: 2; }

  /* center align on mobile */
  .left{ text-align:center; margin: 0 auto; }
  .brand{ justify-content:center; }
}

/* LEFT */
.left{ max-width: 860px; }

.brand{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:22px;
}

.brandMark{
  width:36px;
  height:36px;
  border-radius:10px;
  background:
    radial-gradient(circle at 30% 30%, var(--yellow), transparent 60%),
    radial-gradient(circle at 70% 70%, var(--green), transparent 60%);
}

/* ✅ Bigger “Jimbilin Studios” */
.brandText{
  font-weight: 950;
  font-size: 44px;   /* increased */
  letter-spacing: .3px;
}

/* Headline */
.headline{
  font-size: clamp(64px, 8vw, 120px);
  line-height:.92;
  margin:0 0 18px;
  letter-spacing:-0.03em;
}

/* Subtext */
.subtext{
  margin:0;
  max-width:60ch;
  font-size:21px;
  line-height:1.7;
  color:var(--muted);
}

/* New line emphasis */
.release{
  display:block;
  margin-top:10px;
  font-weight:700;
  color:var(--text);
}

/* ✅ Mobile text sizes + centered */
@media (max-width: 900px){
  .brandText{ font-size: 34px; }
  .headline{ font-size: clamp(52px, 12vw, 82px); }
  .subtext{ font-size: 17px; max-width: 44ch; margin: 0 auto; }
}

/* RIGHT */
.right{
  position:relative;
  display:grid;
  place-items:center;
  min-height:420px;
}

.blobWrap{
  position:absolute;
  width:min(520px, 78vw);
  height:min(520px, 78vw);
  z-index:0;
}

/* The gradient liquid blob */
.blob{
  position:absolute;
  inset:0;
  border-radius: 55% 45% 60% 40% / 45% 55% 45% 55%;
  background: radial-gradient(circle at 30% 30%,
      rgba(250,204,21,.95),
      rgba(34,197,94,.75) 60%,
      rgba(34,197,94,.15)
  );
  animation: blobMorph 7s ease-in-out infinite, blobFloat 10s ease-in-out infinite;
}

@keyframes blobMorph{
  0%,100% { border-radius: 55% 45% 60% 40% / 45% 55% 45% 55%; }
  50%     { border-radius: 42% 58% 45% 55% / 58% 42% 60% 40%; }
}
@keyframes blobFloat{
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(22px, -14px) scale(1.06); }
}

/* Droplets */
.drop{
  position:absolute;
  width:18px;
  height:18px;
  border-radius: 50%;
  opacity:0;
}
.drop:nth-child(even){ background: rgba(34,197,94,.95); }
.drop:nth-child(odd){ background: rgba(250,204,21,.95); }

.d1{ left: 62%; top: 18%; animation: pop1 3.8s ease-in-out infinite; }
.d2{ left: 78%; top: 34%; animation: pop2 4.2s ease-in-out infinite .5s; }
.d3{ left: 18%; top: 62%; animation: pop3 3.6s ease-in-out infinite 1s; }
.d4{ left: 30%; top: 18%; animation: pop4 4.0s ease-in-out infinite 1.4s; }
.d5{ left: 70%; top: 70%; animation: pop5 4.4s ease-in-out infinite 1.8s; }
.d6{ left: 45%; top: 10%; animation: pop6 3.9s ease-in-out infinite 2.2s; }
.d7{ left: 10%; top: 35%; animation: pop7 4.1s ease-in-out infinite 2.6s; }
.d8{ left: 86%; top: 58%; animation: pop8 4.6s ease-in-out infinite 3.0s; }

@keyframes pop1{
  0%{ transform: translate(0,0) scale(.4); opacity:0; }
  15%{ opacity:.95; }
  55%{ transform: translate(70px,-35px) scale(1); opacity:.9; }
  100%{ transform: translate(120px,-60px) scale(.9); opacity:0; }
}
@keyframes pop2{
  0%{ transform: translate(0,0) scale(.4); opacity:0; }
  18%{ opacity:.9; }
  60%{ transform: translate(85px,10px) scale(1.05); opacity:.85; }
  100%{ transform: translate(140px,18px) scale(.9); opacity:0; }
}
@keyframes pop3{
  0%{ transform: translate(0,0) scale(.4); opacity:0; }
  18%{ opacity:.9; }
  60%{ transform: translate(-70px,55px) scale(1.05); opacity:.85; }
  100%{ transform: translate(-120px,95px) scale(.9); opacity:0; }
}
@keyframes pop4{
  0%{ transform: translate(0,0) scale(.4); opacity:0; }
  16%{ opacity:.95; }
  60%{ transform: translate(-55px,-55px) scale(1.02); opacity:.85; }
  100%{ transform: translate(-95px,-95px) scale(.9); opacity:0; }
}
@keyframes pop5{
  0%{ transform: translate(0,0) scale(.4); opacity:0; }
  16%{ opacity:.9; }
  60%{ transform: translate(55px,85px) scale(1.05); opacity:.85; }
  100%{ transform: translate(95px,140px) scale(.9); opacity:0; }
}
@keyframes pop6{
  0%{ transform: translate(0,0) scale(.4); opacity:0; }
  15%{ opacity:.95; }
  55%{ transform: translate(0px,-95px) scale(1); opacity:.85; }
  100%{ transform: translate(0px,-150px) scale(.9); opacity:0; }
}
@keyframes pop7{
  0%{ transform: translate(0,0) scale(.4); opacity:0; }
  16%{ opacity:.92; }
  60%{ transform: translate(-95px,0px) scale(1.05); opacity:.85; }
  100%{ transform: translate(-150px,0px) scale(.9); opacity:0; }
}
@keyframes pop8{
  0%{ transform: translate(0,0) scale(.4); opacity:0; }
  18%{ opacity:.9; }
  60%{ transform: translate(95px,35px) scale(1.05); opacity:.85; }
  100%{ transform: translate(150px,55px) scale(.9); opacity:0; }
}

/* Mascot circle */
.circle{
  position:relative;
  z-index:1;
  width:min(420px, 70vw);
  height:min(420px, 70vw);
  border-radius:50%;
  background:#ffffff;
  border:1px solid rgba(15,23,42,.08);
  box-shadow: 0 30px 80px rgba(15,23,42,.15);
  display:grid;
  place-items:center;
  overflow:hidden;
}

/* Mascot (no drop shadow) */
.mascot{
  width:72%;
  height:72%;
  object-fit:contain;
  transform: translateY(4px);
}

/* ✅ Mobile mascot + blob sizing */
@media (max-width: 900px){
  .right{ min-height: 360px; }

  .blobWrap{
    width: min(420px, 92vw);
    height: min(420px, 92vw);
  }

  .circle{
    width: min(320px, 86vw);
    height: min(320px, 86vw);
  }

  .mascot{
    width: 78%;
    height: 78%;
  }
}