:root{
  --pink:#ff4f86;
  --blue:#43d3ff;
  --violet:#8a7dff;
  --orange:#ffb04f;
  --mint:#53f2c5;
  --yellow:#ffe66d;
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  scroll-behavior:smooth;
}

/* BODY + FONT */
body{
  font-family:'Nunito',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  color:#3a2a33;
  background:#fff7fc;
}

/* TITLURI */
h1{
  font-size:clamp(32px,7vw,64px);
  font-weight:800;
  background:linear-gradient(90deg,var(--pink),var(--orange),var(--blue));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

h2{
  font-weight:800;
}

p{
  line-height:1.6;
  color:#4d3b44;
}

/* INTRO STARS BACKGROUND */
#intro{
  background:linear-gradient(180deg,#6a4bcd 0%,#8e60ff 40%,#ff7ac6 70%,#ffd1ec 100%);
  overflow:hidden;
  position:relative;
  color:#fff;
}
#intro .stars,
#intro .stars2,
#intro .stars3{
  position:absolute;
  inset:0;
  pointer-events:none;
  background-repeat:repeat;
  background-size:200px 200px;
  opacity:.9;
}
#intro .stars{
  background-image:
    radial-gradient(2px 2px at 10% 20%, rgba(255,255,255,.9) 99%, transparent 100%),
    radial-gradient(2px 2px at 25% 35%, rgba(255,255,255,.8) 99%, transparent 100%),
    radial-gradient(3px 3px at 40% 15%, rgba(255,255,255,.9) 99%, transparent 100%);
  animation: drift 28s linear infinite;
}
#intro .stars2{
  background-image:
    radial-gradient(2px 2px at 60% 28%, rgba(255,255,255,.85) 99%, transparent 100%),
    radial-gradient(2px 2px at 75% 45%, rgba(255,255,255,.9) 99%, transparent 100%),
    radial-gradient(3px 3px at 85% 22%, rgba(255,255,255,.85) 99%, transparent 100%);
  animation: drift2 36s linear infinite;
}
#intro .stars3{
  background-image:
    radial-gradient(2px 2px at 55% 70%, rgba(255,255,255,.8) 99%, transparent 100%),
    radial-gradient(3px 3px at 30% 80%, rgba(255,255,255,.9) 99%, transparent 100%),
    radial-gradient(2px 2px at 90% 60%, rgba(255,255,255,.75) 99%, transparent 100%);
  animation: drift3 44s linear infinite;
}
@keyframes drift{
  from{transform:translateY(0)}
  to{transform:translateY(-20px)}
}
@keyframes drift2{
  from{transform:translateY(0)}
  to{transform:translateY(25px)}
}
@keyframes drift3{
  from{transform:translateY(0)}
  to{transform:translateY(-35px)}
}
#intro>*{
  position:relative;
  z-index:1;
}

/* MOTIVE BACKGROUND */
#motive{
  background:linear-gradient(135deg,#fff0f5 0%,#ffe7c2 100%);
}

/* BADGE CARDS (DOAR VIZUAL) */
.badge{
  background:#fff;
  border-radius:18px;
  box-shadow:0 4px 10px rgba(0,0,0,.05);
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  transition:transform .25s ease, box-shadow .25s ease;
}
.badge:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 18px rgba(255,79,163,.18);
}
.badge > div:nth-child(1){
  font-size:30px;
  margin-bottom:4px;
}
.badge > div:nth-child(2){
  font-weight:700;
  margin-bottom:4px;
}
.badge > div:nth-child(3){
  font-size:.95rem;
  line-height:1.4;
  color:#5b4a54;
}

/* PRODUCT CARDS (DOAR VIZUAL) */
.product-card{
  border-radius:24px;
  padding:0;
  box-shadow:none;
  color:#3a2a33;
  background:transparent;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.product-card img{
  width:100%;
  max-width:360px;
  height:360px;
  object-fit:contain;
  border-radius:20px;
  margin-bottom:12px;
  background:transparent;
}
.product-card h3{
  font-size:1.1rem;
  margin-bottom:4px;
  color:#ff4f86;
  font-weight:800;
  letter-spacing:.1px;
}
.product-card p{
  font-size:.95rem;
  color:#3a2a33;
  opacity:.9;
}

/* BUBBLES BACKGROUND (PARTNERS) */
.bubbles{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:-1;
  overflow:hidden;
}
.bubble{
  position:absolute;
  width:22px;
  height:22px;
  background:rgba(255,101,170,0.25);
  border-radius:50%;
  animation:floatUp 9s infinite ease-in;
}
@keyframes floatUp{
  0%{transform:translateY(100vh) scale(.7);opacity:.3}
  100%{transform:translateY(-10vh) scale(1);opacity:.8}
}

/* PARTNER CARDS */
.card{
  background:white;
  border-radius:22px;
  padding:26px;
  box-shadow:0 4px 12px rgba(0,0,0,0.06);
  border:2px solid #ffd1e8;
  transition:0.2s;
  position:relative;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 6px 18px rgba(255,79,163,0.15);
}
.card h2{
  margin-top:0;
  font-size:20px;
  color:#ff3f94;
  margin-bottom:14px;
}
.card-title{
  display:flex;
  align-items:center;
  gap:8px;
}

/* Pills icon */
.partner-pill{
  width:32px;
  height:32px;
  border-radius:999px;
  background:#ffe0f4;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  line-height:1;
  box-shadow:0 3px 8px rgba(255,79,163,0.35);
  flex-shrink:0;
}

/* Pills color variants */
.pill-play{
  background:linear-gradient(135deg,#ff9ddd,#ffc7f2);
}
.pill-park{
  background:#d9ffe7;
}
.pill-aqua{
  background:#d9f3ff;
}
.pill-retail{
  background:#ffe8cc;
}
.pill-cinema{
  background:#fff4b3;
}

/* Partner dropdown */
.partner{
  cursor:pointer;
  position:relative;
}
.card.partner .card-title::after{
  content:'';
  margin-left:auto;
  width:16px;
  height:16px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  transform-origin:center;
  opacity:.7;
  transition:transform 0.2s ease;
}
.partner.is-open .card-title::after{
  transform:rotate(-135deg);
}
.card.partner.no-dropdown .card-title::after{
  display:none !important;
}

.partner-name{
  font-weight:600;
  font-size:20px;
  color:#ff3f94;
  line-height:1;
  display:flex;
  align-items:center;
}
.partner-count{
  font-size:14px;
  color:#ff5aa8;
  margin-left:4px;
}
.partner-locations{
  margin-top:12px;
  display:none;
  flex-direction:column;
  gap:8px;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
}
.partner.is-open .partner-locations{
  display:flex;
}
.location-tag{
  display:flex;
  align-items:center;
  gap:6px;
  background:#fff1f8;
  padding:8px 12px;
  border-radius:14px;
  font-size:14px;
}

/* CONTACT SECTION (gradient + text) */
.contact-section{
  background:linear-gradient(135deg,#fff0f5 0%,#ffe7c2 100%);
}
.contact-section h2{
  background:linear-gradient(90deg,var(--pink),var(--orange));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.contact-section p{
  font-size:1.05rem;
  font-weight:700;
  color:#3a2a33;
}

/* FOOTER */
footer{
  background:linear-gradient(90deg,var(--pink),var(--orange),var(--blue));
  color:#fff;
}
.socials a{
  color:white;
  font-size:28px;
  text-decoration:none;
  transition:.3s;
}
.socials a:hover{
  opacity:.7;
}
footer small{
  opacity:.9;
}

/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce){
  #intro .stars,
  #intro .stars2,
  #intro .stars3,
  .bubble{
    animation:none;
  }
}