:root{
  --green-deep:#1f3a2b;
  --green:#2d5a3d;
  --green-soft:#a8c4ae;
  --cream:#f5f1e8;
  --ink:#15201a;
  --kid-teal:#0fb5a8;
  --kid-coral:#ff7a59;
  --kid-yellow:#ffd24a;
  --kid-pink:#ff8fb3;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#000;color:#fff;font-family:'Inter',sans-serif}
.split{display:flex;height:100vh;width:100vw}
.half{position:relative;flex:1;overflow:hidden;text-decoration:none;color:#fff;transition:flex .6s cubic-bezier(.7,.1,.2,1)}
.half:hover{flex:1.35}
.half .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease}
.half:hover .bg{transform:scale(1.05)}
.veil{position:absolute;inset:0;background:linear-gradient(135deg,rgba(31,58,43,.85),rgba(21,32,26,.7) 60%,rgba(21,32,26,.95))}
.kids-veil{background:linear-gradient(135deg,rgba(15,181,168,.78),rgba(255,122,89,.55) 60%,rgba(255,143,179,.78))}

/* LOGOS — pinned to top-inner-corner of each half */
.logo{
  position:absolute;
  top:1.75rem;
  width:clamp(90px,11vw,150px);
  height:auto;
  object-fit:contain;
  z-index:3;
  pointer-events:none;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.45));
  transition:transform .5s ease, opacity .5s ease, filter .5s ease;
}
.logo-adults{right:1.75rem}   /* top-right of left (adults) section */
.logo-kids{left:1.75rem}      /* top-left of right (kids) section */
.logo-kids{filter:drop-shadow(0 6px 18px rgba(0,0,0,.25))}

/* Active half: gentle scale up */
.half:hover .logo-adults{transform:scale(1.5) translateX(-15vw);}
.kids:hover .logo-kids{transform:scale(1.5) translateX(15vw);}
/* Inactive half: dim slightly */
.split:hover .half:not(:hover) .logo{opacity:.55;transform:scale(.95)}

.content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:6vw;max-width:640px}
.kicker{font-size:11px;letter-spacing:.38em;text-transform:uppercase;color:var(--green-soft);margin-bottom:1.25rem}
.kids .kicker{color:#fff8d8;font-family:'Quicksand',sans-serif;letter-spacing:.3em;font-weight:600}
.title{font-family:'Playfair Display',serif;font-weight:500;font-size:clamp(2.2rem,5vw,4rem);line-height:1.05;margin-bottom:1.5rem;letter-spacing:-.01em}
.title-kids{font-family:'Fraunces',serif;font-weight:700}
.lede{font-size:1.05rem;line-height:1.6;color:rgba(255,255,255,.9);margin-bottom:2.5rem;max-width:30rem;font-weight:300}
.kids .lede{font-family:'Quicksand',sans-serif;font-weight:500}
.cta{display:inline-flex;align-self:flex-start;padding:1rem 2.2rem;border:1px solid rgba(255,255,255,.5);border-radius:999px;font-size:11px;letter-spacing:.25em;text-transform:uppercase;transition:all .3s;background:rgba(0,0,0,.15)}
.half:hover .cta{background:var(--green-soft);color:var(--ink);border-color:var(--green-soft)}
.cta-kids{font-family:'Quicksand',sans-serif;font-weight:700;letter-spacing:.15em;border-radius:999px;border-width:2px}
.kids:hover .cta-kids{background:var(--kid-yellow);color:var(--ink);border-color:var(--kid-yellow)}

@media(max-width:780px){
  html,body{overflow:auto}
  .split{flex-direction:column;height:auto}
  .half{min-height:88vh}
  .half:hover{flex:1}
  .logo{width:90px;top:1rem}
  .logo-adults{right:1rem}
  .logo-kids{left: 20rem;}
  .half:hover .logo,.split:hover .half:not(:hover) .logo{transform:none;opacity:1}
  .content{padding:5rem 1.5rem 3rem;max-width:100%;justify-content:flex-start}
  .lede{font-size:1rem;margin-bottom:1.75rem}
}
#decu{rotate: 3deg;color: #ffd24a;font-size: 140%;}
#odrasle{color: var(--green-soft);font-size: 140%;}