:root{
  --bg1:#ffd6ec;
  --bg2:#ffc0d9;
  --bg3:#ff9fc4;
  --ink:#7a3d59;
  --ink-2:#a14c72;
  --panel: rgba(255,255,255,0.55);
  --panel-strong: rgba(255,255,255,0.7);
  --accent:#ff64a7;
  --baby-blue:#dff2ff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Sour Gummy', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:var(--ink);
  overflow-x:hidden;
}

/* Animated gradient */
.animated-bg{
  position:fixed; inset:0; z-index:-2;
  background: radial-gradient(1200px 900px at 10% 10%, var(--bg1), transparent 60%),
              radial-gradient(1000px 800px at 90% 20%, var(--bg2), transparent 60%),
              radial-gradient(1200px 900px at 30% 90%, var(--bg3), transparent 60%),
              linear-gradient(135deg, #ffe5f4, #ffd6ec 60%, #ffc0d9);
  animation: floatGrad 16s ease-in-out infinite alternate;
}
@keyframes floatGrad{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(0,-20px,0) scale(1.02)}
}

/* Bubbles generated in JS */
.bubbles{
  position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:-1;
}
.bubbles span{
  position:absolute; bottom:-120px;
  width:var(--s); height:var(--s); left:var(--x);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,.25) 60%, rgba(255,255,255,0) 70%);
  border-radius:50%; filter: blur(.5px);
  animation: rise var(--d) linear infinite; animation-delay: var(--delay);
}
@keyframes rise{ to{ transform: translateY(-120vh) scale(1.05); } }

.wrap{ width:min(1100px, 92%); margin: 32px auto 80px; }

/* Brand */
.brand{ display:flex; align-items:center; gap:18px; justify-content:center; margin-bottom:8px; }
.brand__logo{ width:min(120px, 22vw); height:auto; filter: drop-shadow(0 6px 14px rgba(0,0,0,.12)); }
.brand__name h1{ font-size:clamp(2.2rem, 4.5vw, 3.3rem); color:#6e2d51; margin:0; letter-spacing:.5px; }
.tagline{ margin:.35rem 0 0; font-weight:700; color:#8b3c65; }

/* Cards */
.card{
  margin-top:22px; padding:24px;
  background:var(--panel); border:1px solid rgba(255,255,255,0.6);
  border-radius:18px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(255, 108, 167, .15);
}
.card--desc{
  line-height:1.8; color:#5d2f45; background:var(--panel-strong);
  text-align:center; font-size:clamp(1.08rem, 1.5vw, 1.25rem);
}
.p-strong{ margin-top:14px; font-size:clamp(1.08rem, 1.5vw, 1.25rem);}

/* Contract */
.card--ca{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  background: var(--baby-blue);
}
.ca__row{ display:flex; align-items:center; gap:10px;
  font-size:clamp(1.05rem,2.3vw,1.25rem); font-weight:700; color:#355c7d; }
.ca__label{ opacity:.7 }

.btn-copy{
  border:none; background:#fff; color:#355c7d; padding:8px 10px; border-radius:10px;
  cursor:pointer; transition: all .2s ease; box-shadow: 0 6px 14px rgba(53,92,125,.18);
}
.btn-copy:hover{ transform:translateY(-1px); background:#f0f8ff }

.socials{ display:flex; gap:16px; margin-top:6px; }
.social-link{ width:44px;height:44px; display:grid;place-items:center;
  color:#355c7d; background:#ffffff; border-radius:12px;
  box-shadow: 0 6px 14px rgba(53,92,125,.15); transition:transform .18s ease, background .18s ease; }
.social-link:hover{ transform:translateY(-2px); background:#f0f8ff }
.social-link svg{ width:24px; height:24px; display:block }

/* Gallery */
.gallery__title{ margin:0 0 6px; color:#6e2d51; }
.hint{ opacity:.6; margin:0 0 14px; font-size:.95rem; }
.grid{ display:grid; gap:14px; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 820px){ .grid{ grid-template-columns: repeat(2, 1fr); } }
.grid img{
  width:100%; height:100%; object-fit:cover; border-radius:14px; background:#fff; aspect-ratio:1/1;
  cursor:pointer; transition: transform .18s ease, box-shadow .18s ease; box-shadow: 0 6px 20px rgba(0,0,0,.08);
}
.grid img:hover{ transform:translateY(-3px); box-shadow: 0 12px 26px rgba(0,0,0,.12); }

/* Lightbox */
.lightbox{ position:fixed; inset:0; background: rgba(0,0,0,.65); display:none; align-items:center; justify-content:center; padding:30px; z-index:50; }
.lightbox img{ max-width: min(1200px, 92vw); max-height: 86vh; border-radius:16px; box-shadow: 0 20px 80px rgba(0,0,0,.4); }
.lightbox__close{ position:fixed; top:18px; right:22px; font-size:42px; color:white; background:transparent; border:none; cursor:pointer; }
.lightbox.show{ display:flex }

/* SR only */
.sr-only{ position:absolute; left:-10000px; width:1px;height:1px;overflow:hidden; }