/* Tinsel & Tears — ridiculous on purpose */
:root{
  --bg1:#ffd6f5;
  --bg2:#c2e9ff;
  --hot:#ff4fb1;
  --hot2:#7cd1ff;
  --ink:#222;
  --card:rgba(255,255,255,0.85);
  --glass:rgba(255,255,255,0.55);
  --shadow:0 18px 40px rgba(0,0,0,0.12);
  --radius:20px;
}

*{ box-sizing:border-box; }

html,body{ height:100%; }
body{
  margin:0;
  color:var(--ink);
  font-family:"Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 800px at 20% 20%, var(--bg1), transparent 60%),
              radial-gradient(1200px 800px at 80% 10%, var(--bg2), transparent 55%),
              linear-gradient(135deg, var(--bg1), var(--bg2));
  overflow-x:hidden;
}

#glitter{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:1;
  opacity:0.55;
}

.topbar{
  position:sticky;
  top:0;
  z-index:20;
  backdrop-filter: blur(14px);
  background: rgba(255,255,255,0.45);
  border-bottom: 1px solid rgba(255,255,255,0.6);
}
.topbar__inner{
  max-width:1100px;
  margin:0 auto;
  padding: 14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.brand{ display:flex; align-items:center; gap:12px; min-width:240px; }
.brand__logo{
  width:44px; height:44px;
  border-radius:12px;
  box-shadow:0 10px 18px rgba(0,0,0,0.12);
  background:white;
}
.brand__name{
  font-family:"Fredoka", system-ui, sans-serif;
  font-weight:600;
  letter-spacing:0.2px;
  font-size:18px;
  line-height:1.1;
}
.brand__tag{
  font-size:12px;
  opacity:0.75;
  margin-top:4px;
}
.spark{
  color:var(--hot);
  text-shadow: 0 0 12px rgba(255,79,177,0.35);
}

.nav{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.nav a{
  text-decoration:none;
  color:var(--ink);
  font-size:13px;
  padding:8px 10px;
  border-radius:999px;
  background: rgba(255,255,255,0.35);
  border: 1px solid rgba(255,255,255,0.6);
}
.nav a:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(0,0,0,0.08);
}

main{ position:relative; z-index:5; }

.hero{
  padding: 34px 18px 0;
}
.hero__inner{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns: 1.2fr 0.9fr;
  gap:18px;
  align-items:stretch;
}
.hero__copy{
  padding: 26px;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
}
.hero__copy:before{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(120deg, rgba(255,79,177,0.35), rgba(124,209,255,0.35), rgba(255,255,255,0.0));
  filter: blur(18px);
  opacity:0.9;
}
.hero__copy > *{ position:relative; }
.hero h1{
  font-family:"Fredoka", system-ui, sans-serif;
  font-size:38px;
  line-height:1.05;
  margin: 0 0 14px;
}
.lede{
  margin:0 0 18px;
  font-size:16px;
  opacity:0.9;
}
.ctaRow{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 11px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.08);
  cursor:pointer;
  text-decoration:none;
  font-weight:600;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
  user-select:none;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 14px 26px rgba(0,0,0,0.12); }
.btn--primary{
  background: linear-gradient(45deg, var(--hot), var(--hot2));
  color:white;
  border:none;
}
.btn--secondary{
  background: rgba(255,255,255,0.75);
}
.btn--ghost{
  background: rgba(255,255,255,0.35);
}
.pillRow{ display:flex; gap:10px; flex-wrap:wrap; }
.pill{
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.35);
  border: 1px dashed rgba(255,79,177,0.35);
  font-size:13px;
}

.hero__card{
  border-radius: var(--radius);
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.portraitWrap{
  position:relative;
  height: 280px;
  overflow:hidden;
}
.portrait{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position: center;
  display:block;
  filter: saturate(1.05) contrast(1.02);
  transform: scale(1.02);
}
.portraitGlow{
  position:absolute;
  inset:-40px;
  background: radial-gradient(circle at 40% 35%, rgba(255,79,177,0.35), transparent 45%),
              radial-gradient(circle at 70% 40%, rgba(124,209,255,0.35), transparent 50%);
  filter: blur(18px);
  pointer-events:none;
}
.bio{
  padding: 18px 18px 16px;
}
.bio h2{
  margin:0 0 8px;
  font-family:"Fredoka", system-ui, sans-serif;
}
.bio p{ margin:0 0 10px; opacity:0.9; }
.bioList{
  margin:0;
  padding-left:18px;
  opacity:0.9;
}
.bioList li{ margin: 6px 0; }

.ticker{
  max-width:1100px;
  margin: 14px auto 0;
  overflow:hidden;
  border-radius:999px;
  border: 1px solid rgba(255,255,255,0.65);
  background: rgba(255,255,255,0.35);
}
.ticker__track{
  display:flex;
  gap:26px;
  padding: 10px 14px;
  white-space:nowrap;
  animation: slide 18s linear infinite;
  font-weight:600;
}
@keyframes slide{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

.section{
  padding: 48px 18px;
}
.section--alt{
  background: rgba(255,255,255,0.30);
  border-top: 1px solid rgba(255,255,255,0.65);
  border-bottom: 1px solid rgba(255,255,255,0.65);
}
.section__inner{
  max-width:1100px;
  margin:0 auto;
}
.section__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}
.section h2{
  margin:0;
  font-family:"Fredoka", system-ui, sans-serif;
  font-size:28px;
}
.muted{ opacity:0.75; margin:0; }

.menuGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:14px;
}
.menuCard{
  background: var(--card);
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.10);
  position:relative;
  overflow:hidden;
}
.menuCard:before{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(120deg, rgba(255,79,177,0.22), rgba(124,209,255,0.22), rgba(255,255,255,0.0));
  filter: blur(14px);
  opacity:0.9;
}
.menuCard > *{ position:relative; }
.menuCard h3{ margin:0 0 6px; font-family:"Fredoka", system-ui, sans-serif; }
.menuCard p{ margin:0 0 12px; opacity:0.9; }
.menuMeta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  font-size:13px;
}
.price{
  font-weight:800;
  color:var(--hot);
  text-shadow: 0 0 12px rgba(255,79,177,0.20);
}
.chip{
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.55);
  border: 1px dashed rgba(255,79,177,0.30);
}

.menuActions{ margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; }

.split{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap:14px;
  align-items:start;
}
.calc{
  display:flex;
  gap:10px;
  margin: 12px 0 10px;
  flex-wrap:wrap;
}
input, textarea{
  width:100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.85);
  font-size:15px;
  outline:none;
}
textarea{ resize:vertical; }
.result{
  margin-top:10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(255,255,255,0.85);
  min-height: 44px;
}
.fineprint{
  margin-top:10px;
  font-size:12px;
  opacity:0.75;
}

.card{
  background: var(--card);
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.10);
}
.card--glow{
  position:relative;
  overflow:hidden;
}
.card--glow:before{
  content:"";
  position:absolute;
  inset:-4px;
  background: radial-gradient(circle at 30% 30%, rgba(255,79,177,0.30), transparent 45%),
              radial-gradient(circle at 70% 40%, rgba(124,209,255,0.30), transparent 50%);
  filter: blur(18px);
  pointer-events:none;
}
.card--glow > *{ position:relative; }

.policy{ margin:0; padding-left:18px; }
.policy li{ margin: 8px 0; opacity:0.9; }

.pianoGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:14px;
}
.chord{
  margin-top:10px;
  font-weight:800;
  font-size:22px;
  color: var(--hot);
}

.playlist{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}
.track{
  display:grid;
  grid-template-columns: 34px 1fr 50px;
  gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.60);
  border: 1px solid rgba(255,255,255,0.85);
  font-size:13px;
}
.track span:nth-child(1){ font-weight:800; color: var(--hot); }

.toast{
  margin-top:10px;
  font-size:13px;
  opacity:0.9;
}

.gallery{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:14px;
}
.galleryCard{
  position:relative;
  background: var(--card);
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: 0 14px 30px rgba(0,0,0,0.10);
}
.badge{
  position:absolute;
  top:12px;
  left:12px;
  z-index:2;
  padding: 6px 10px;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
  background: linear-gradient(45deg, var(--hot), var(--hot2));
  color:white;
}
.galleryArt{
  height: 140px;
  background-size: cover;
  background-position:center;
  filter:saturate(1.05);
}
.art1{ background-image: radial-gradient(circle at 30% 40%, rgba(255,79,177,0.45), transparent 45%), linear-gradient(135deg, #ffd6f5, #c2e9ff); }
.art2{ background-image: radial-gradient(circle at 60% 35%, rgba(124,209,255,0.50), transparent 45%), linear-gradient(135deg, #fff7b2, #ffd6f5); }
.art3{ background-image: radial-gradient(circle at 40% 30%, rgba(255,255,255,0.45), transparent 48%), linear-gradient(135deg, #9bffed, #c2e9ff); }
.art4{ background-image: radial-gradient(circle at 55% 35%, rgba(255,79,177,0.35), transparent 50%), linear-gradient(135deg, #c2e9ff, #b7b2ff); }

.galleryText{
  padding: 12px 14px 14px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.galleryText span{ opacity:0.8; font-size:13px; }

.form{
  max-width:900px;
  margin: 0 auto;
}
.formRow{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
label{
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:13px;
  font-weight:600;
}
.footerNote{
  margin-top:18px;
  text-align:center;
  font-size:12px;
  opacity:0.75;
}

@media (max-width: 980px){
  .hero__inner{ grid-template-columns: 1fr; }
  .menuGrid{ grid-template-columns: 1fr 1fr; }
  .pianoGrid{ grid-template-columns: 1fr; }
  .gallery{ grid-template-columns: 1fr 1fr; }
  .split{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .menuGrid{ grid-template-columns: 1fr; }
  .gallery{ grid-template-columns: 1fr; }
  .formRow{ grid-template-columns: 1fr; }
}