@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&family=Dancing+Script:wght@400;700&display=swap');
:root{--bg1:#fff8fb;--bg2:#eef9ff;--accent1:#6fc3ff;--accent2:#59aef1;--text:#0f172a}
*{box-sizing:border-box}
body{font-family:'Poppins',sans-serif;margin:0;background:linear-gradient(180deg,var(--bg1),var(--bg2));color:var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.bg-word{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%);font-size:120px;font-weight:900;color:rgba(95,180,240,0.18);letter-spacing:6px;z-index:0;pointer-events:none;text-transform:uppercase}
.hero{display:flex;align-items:center;justify-content:space-between;padding:36px;gap:20px;position:relative;z-index:2}
.hero-left{flex:1;min-width:240px}
.hero-right{flex:1;display:flex;justify-content:center;align-items:center}
h1{font-size:28px;margin:0 0 8px 0}
.name{font-family:'Dancing Script',cursive;color:var(--accent2);font-size:32px;display:inline-block}
.lead{margin:0 0 16px 0;color:#475569}
.controls{display:flex;gap:12px;flex-wrap:wrap}
.btn{padding:12px 18px;border-radius:12px;border:none;font-weight:700;cursor:pointer;box-shadow:0 8px 20px rgba(48,82,255,0.08);transition:transform .18s ease,box-shadow .18s ease}
.primary{background:linear-gradient(90deg,var(--accent1),var(--accent2));color:white}
.music-toggle{width:48px;height:48px;border-radius:12px;border:none;background:#fff;box-shadow:0 6px 18px rgba(15,23,42,0.06);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.music-toggle.playing{animation:spin 3s linear infinite;box-shadow:0 6px 24px rgba(95,174,240,0.28);transform:scale(1.03)}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.main-22{width:260px;border-radius:18px;box-shadow:0 10px 30px rgba(46,155,214,0.12);object-fit:cover}
.content{padding:20px;padding-top:0;position:relative;z-index:2}
.card{background:#fff;padding:18px;border-radius:14px;margin-bottom:18px;box-shadow:0 8px 20px rgba(15,23,42,0.04)}
.quotes ul{margin:0;padding-left:18px}
.testimonial-inner{display:flex;gap:14px;align-items:flex-start}
.client-small{width:32px;height:32px;border-radius:50%;object-fit:cover}
.test-text h3{margin:0 0 6px 0;display:flex;align-items:center;gap:8px;font-size:16px}
.hear-btn{background:linear-gradient(90deg,var(--accent1),var(--accent2));color:white;border:none;padding:6px 10px;border-radius:10px;cursor:pointer;font-weight:700;display:inline-flex;align-items:center;gap:8px}
.footer{text-align:center;padding:26px;color:#475569;font-size:14px}
/* Funny cases */
.funny-case{padding:20px;background:linear-gradient(180deg,#fff,#f7fdff);border-radius:14px}
.case{margin:18px 0;border:1px solid #e1f1ff;border-radius:14px;overflow:hidden;background:#fff;transition:box-shadow .3s}
.case:hover{box-shadow:0 8px 28px rgba(0,0,0,0.06)}
.case-header{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:#e8f5ff}
.case-header h3{color:var(--accent2);font-family:'Dancing Script',cursive;margin:0;font-size:20px}
.gavel{display:inline-block;margin-left:6px;transition:transform .35s}
.gavel:hover{transform:rotate(-25deg) scale(1.25);text-shadow:0 4px 14px rgba(89,174,241,0.18)}
.open-btn{background:linear-gradient(90deg,var(--accent1),var(--accent2));border:none;color:#fff;padding:8px 12px;border-radius:18px;cursor:pointer;font-weight:700}
.case-body{display:none;padding:14px 18px;line-height:1.6}
.case-body.open{display:block;animation:fadeIn .45s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
/* modal */
.modal{display:none;position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(255,255,255,0.95);align-items:center;justify-content:center;z-index:9999;animation:fadeIn .45s ease}
.modal-card{background:linear-gradient(180deg,#fff,#f8fbff);padding:22px;border-radius:14px;max-width:420px;width:92%;text-align:center;box-shadow:0 12px 36px rgba(15,23,42,0.12);position:relative}
.modal-close{position:absolute;right:10px;top:10px;background:transparent;border:none;font-size:20px;cursor:pointer;color:var(--accent2)}
.confetti-piece{position:fixed;width:10px;height:14px;opacity:0.95;pointer-events:none;border-radius:2px;will-change:transform,opacity}
.small{font-size:12px;color:#6b7280;margin-top:8px}
@media(max-width:720px){.hero{flex-direction:column;align-items:center;text-align:center}.main-22{width:200px}.bg-word{font-size:80px;top:35

/*new change by me */
/* Add to bottom of your CSS */

/* Subtle animated gradient background */
body {
  background: linear-gradient(180deg, #fff8fb, #eef9ff);
  background-size: 400% 400%;
  animation: bgShift 15s ease infinite;
}
@keyframes bgShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Make title pop */
.hero h1 {
  font-size: 32px;
  background: linear-gradient(90deg, #59aef1, #6fc3ff, #ff99cc);
  -webkit-background-clip: text;
  color: transparent;
  animation: shimmer 3s linear infinite;
}
@keyframes shimmer {
  0% { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

/* Glow buttons */
.btn.primary {
  box-shadow: 0 0 20px rgba(89,174,241,0.4);
}
.btn.primary:hover {
  transform: scale(1.05);
  box-shadow: 0 0 25px rgba(255,153,204,0.5);
}

/* Floating animation for hero image */
.main-22 {
  animation: floaty 4s ease-in-out infinite;
}
@keyframes floaty {
  0%,100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

/* Add sparkle behind modal */
.modal::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255,182,193,0.4), transparent 70%);
  z-index: -1;
  animation: pulse 3s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { opacity: 0.7; }
  50% { opacity: 0.4; }
}

/* Confetti pieces glow a little */
.confetti-piece {
  box-shadow: 0 0 8px rgba(255,255,255,0.4);
}

/* Add soft entrance animation for cards */
.card {
  animation: cardFade 0.8s ease both;
}
@keyframes cardFade {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Float animation for hear button */
.hear-btn {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hear-btn.active {
  animation: floatUp 0.6s ease forwards;
  box-shadow: 0 8px 20px rgba(89,174,241,0.4);
}

@keyframes floatUp {
  0%   { transform: translateY(0) scale(1); }
  30%  { transform: translateY(-10px) scale(1.05); }
  60%  { transform: translateY(0) scale(1); }
  80%  { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}
/* Case No.5 special styling */
.case:nth-child(6) {
  background: linear-gradient(180deg, #ffffff, #f9fcff);
  border-left: 5px solid #8dd3ff;
}
.case:nth-child(6) .case-header {
  background: #ecf8ff;
}
.case:nth-child(6) .case-header h3 {
  color: #4ca3ff;
}