:root{
      --bg:#fff7e6;--card:#ffffff;--ink:#1f2937;--muted:#6b7280;
      --brand:#d97706;--brand2:#f59e0b;--border:#eadcc5;
      --shadow:0 18px 50px rgba(31,41,55,.14);
      --ring:0 0 0 4px rgba(245,158,11,.22);
      --radius:22px;--soft:#fff1d6;--glass:rgba(255,255,255,.78);
      --sans: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    }
    *{box-sizing:border-box}
    body{
      margin:0;font-family:var(--sans);color:var(--ink);
      background:
        radial-gradient(900px 520px at 10% -10%, rgba(245,158,11,.28), transparent 60%),
        radial-gradient(780px 520px at 95% 0%, rgba(217,119,6,.18), transparent 58%),
        linear-gradient(180deg, var(--bg), #fff 55%, var(--bg));
      overflow-x:hidden;
    }
    a{color:inherit}
    .wrap{max-width:1180px;margin:0 auto;padding:18px 14px 90px}

    .topbar{
      position:sticky; top:0; z-index:60;
      backdrop-filter: blur(10px);
      background: linear-gradient(180deg, rgba(255,247,230,.92), rgba(255,247,230,.72));
      border-bottom:1px solid rgba(234,220,197,.8);
    }
    .topbar .inner{
      max-width:1180px;margin:0 auto;padding:10px 14px;
      display:flex;gap:12px;align-items:center;justify-content:space-between;
    }
    .brand{display:flex;gap:10px;align-items:center;min-width:0}
    .logo{
      width:44px;height:44px;border-radius:16px;
      background: conic-gradient(from 210deg, var(--brand2), var(--brand), #ffd166, var(--brand2));
      box-shadow: var(--shadow);
      border:1px solid rgba(0,0,0,.06);
      position:relative; flex:0 0 auto;
    }
    .logo:after{
      content:"♪"; position:absolute; inset:0;
      display:flex; align-items:center; justify-content:center;
      font-weight:900; font-size:22px;
      color:#111827; opacity:.92;
      text-shadow:0 1px 0 rgba(255,255,255,.35);
    }
    .brand h1{margin:0;font-size:14px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .brand .sub{margin:3px 0 0;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

    .nav{
      display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; align-items:center;
    }
    .pill{
      display:inline-flex; align-items:center; gap:8px;
      padding:9px 12px;border-radius:999px;
      border:1px solid var(--border);
      background: rgba(255,255,255,.7);
      font-size:12px;font-weight:900;
      cursor:pointer;
      box-shadow: 0 10px 24px rgba(31,41,55,.08);
      transition: transform .08s ease, box-shadow .2s ease, border-color .2s ease;
      user-select:none;text-decoration:none;
      line-height:1;
    }
    .pill:hover{transform: translateY(-1px); box-shadow:0 16px 32px rgba(31,41,55,.12); border-color:#e6cfae}
    .pill:focus-visible{outline:none; box-shadow: var(--shadow), var(--ring)}
    .pill.primary{background: linear-gradient(180deg, var(--brand2), var(--brand));border-color: transparent;color:#111827}
    .pill.ghost{background: transparent;box-shadow:none}
    .langSel{
      border:1px solid var(--border); background:#fff;
      border-radius:999px; padding:9px 12px; font-weight:900; font-size:12px;
      outline:none; cursor:pointer;
      box-shadow: 0 10px 24px rgba(31,41,55,.08);
    }
    .langSel:focus{box-shadow: var(--shadow), var(--ring); border-color:#e6cfae}

    .card{
      background: var(--glass);
      border:1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow:hidden;
      backdrop-filter: blur(8px);
    }

    /* HERO */
    .hero{
      margin-top:16px;
      display:grid; gap:14px;
      grid-template-columns: 1.25fr .75fr;
      align-items:stretch;
    }
    @media (max-width: 980px){
      .hero{grid-template-columns:1fr}
      .nav{justify-content:flex-start}
    }
    .heroLeft{position:relative;padding:18px 18px 16px;min-height:320px;overflow:hidden}
    .heroGlow{
      position:absolute; inset:-30%;
      background:
        radial-gradient(circle at 30% 30%, rgba(245,158,11,.35), transparent 45%),
        radial-gradient(circle at 70% 40%, rgba(217,119,6,.22), transparent 50%),
        radial-gradient(circle at 55% 80%, rgba(255,209,102,.25), transparent 55%);
      filter: blur(10px);
      transform: rotate(-6deg);
      opacity:.95;
      pointer-events:none;
    }
    .heroInner{position:relative;z-index:2}
    .kicker{
      display:inline-flex;align-items:center;gap:8px;
      padding:8px 10px;border-radius:999px;
      border:1px solid rgba(234,220,197,.9);
      background: rgba(255,255,255,.62);
      font-weight:900;font-size:12px;
    }
    .kicker .dot{width:10px;height:10px;border-radius:999px;background: linear-gradient(180deg, var(--brand2), var(--brand));box-shadow:0 0 0 4px rgba(245,158,11,.18)}
    .heroTitle{margin:12px 0 0;font-size:38px;line-height:1.05;letter-spacing:-.6px}
    @media (max-width:520px){.heroTitle{font-size:32px}}
    .heroTitle .name{
      background: linear-gradient(180deg, #111827, #6b7280);
      -webkit-background-clip:text;background-clip:text;color:transparent;
    }
    .heroTitle .shine{
      background: linear-gradient(90deg, var(--brand2), var(--brand), #ffb020);
      -webkit-background-clip:text;background-clip:text;color:transparent;
    }
    .heroDesc{margin:10px 0 0;color: var(--muted);font-size:14px;line-height:1.6;max-width:66ch}
    .ctaRow{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
    .miniBadges{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
    .badge{
      display:inline-flex;align-items:center;gap:8px;
      padding:8px 10px;border-radius:999px;
      border:1px solid var(--border);
      background: rgba(255,255,255,.72);
      font-size:12px;color: var(--muted);
      font-weight:800;white-space:nowrap;
    }
    .badge b{color:var(--ink)}

    .heroRight{padding:14px;display:grid;grid-template-rows: auto auto 1fr;gap:12px}
    .profile{
      border-radius: 18px;border:1px dashed #e6cfae;background: rgba(255,255,255,.7);
      padding:12px;
    }
    .profileTop{display:flex;gap:12px;align-items:center}
    .avatar{
      width:62px;height:62px;border-radius:20px;
      background: radial-gradient(circle at 35% 30%, #fff, rgba(255,255,255,.2) 55%),
                  linear-gradient(180deg, rgba(245,158,11,.55), rgba(217,119,6,.25));
      border:1px solid rgba(0,0,0,.06);
      box-shadow: 0 12px 30px rgba(31,41,55,.12);
      position:relative;flex:0 0 auto;overflow:hidden;
    }
    .avatar:after{content:"RR";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:1000;font-size:18px;color:#111827;opacity:.88}
    .profile h2{margin:0;font-size:14px}
    .profile p{margin:4px 0 0;color:var(--muted);font-size:12px;line-height:1.55}
    .quickList{display:grid;gap:8px;margin-top:10px}
    .quickItem{
      display:flex;justify-content:space-between;gap:10px;
      padding:9px 10px;background: rgba(255,255,255,.7);
      border:1px solid var(--border);border-radius: 14px;
      font-size:12px;color: var(--muted);
    }
    .quickItem b{color:var(--ink)}
    .tiny{font-size:11px;color:var(--muted);line-height:1.55}

    /* Sections */
    section{scroll-margin-top: 92px}
    .sectionHead{
      margin:18px 0 10px;
      display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap;
    }
    .sectionHead h3{margin:0;font-size:18px;letter-spacing:-.2px}
    .sectionHead p{margin:0;color: var(--muted);font-size:13px}

    .grid3{display:grid;gap:12px;grid-template-columns: repeat(3, 1fr)}
    @media (max-width: 980px){ .grid3{grid-template-columns:1fr} }
    .tile{
      padding:14px;border-radius: var(--radius);
      border:1px solid var(--border);
      background: rgba(255,255,255,.76);
      box-shadow: 0 14px 34px rgba(31,41,55,.10);
      transition: transform .12s ease, box-shadow .2s ease;
      position:relative; overflow:hidden;
    }
    .tile:hover{transform: translateY(-2px);box-shadow: 0 22px 44px rgba(31,41,55,.14)}
    .tile .icon{
      width:44px;height:44px;border-radius:16px;
      background: linear-gradient(180deg, rgba(245,158,11,.35), rgba(217,119,6,.18));
      border:1px solid rgba(0,0,0,.06);
      display:flex;align-items:center;justify-content:center;
      font-size:20px;margin-bottom:10px;
    }
    .tile h4{margin:0;font-size:14px}
    .tile p{margin:6px 0 0;color:var(--muted);font-size:13px;line-height:1.6}

    .twoCol{display:grid;gap:12px;grid-template-columns: 1fr 1fr;align-items:stretch}
    @media(max-width:980px){ .twoCol{grid-template-columns:1fr} }

    .list{margin:0;padding:0;list-style:none;display:grid;gap:8px}
    .li{
      display:flex;gap:10px;align-items:flex-start;
      padding:10px 12px;border:1px solid var(--border);
      border-radius: 16px;background: rgba(255,255,255,.72);
    }
    .tick{
      width:22px;height:22px;border-radius:999px;
      background: rgba(22,101,52,.12);
      border:1px solid rgba(22,101,52,.18);
      display:flex;align-items:center;justify-content:center;
      color:#166534;font-weight:900;flex:0 0 auto;margin-top:1px;
    }
    .li b{display:block;font-size:13px}
    .li span{display:block;color:var(--muted);font-size:12px;line-height:1.55;margin-top:2px}

    /* Festival / Function cards */
    .ffGrid{display:grid;gap:12px;grid-template-columns: repeat(2, 1fr)}
    @media(max-width:980px){ .ffGrid{grid-template-columns:1fr} }
    .ffCard{padding:14px;border-radius: var(--radius);border:1px solid var(--border);background: rgba(255,255,255,.78);box-shadow: 0 14px 34px rgba(31,41,55,.10)}
    .ffTop{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
    .ffTop h4{margin:0;font-size:14px}
    .tag{
      display:inline-flex;align-items:center;gap:8px;
      padding:7px 10px;border-radius:999px;
      border:1px solid var(--border);
      background: rgba(255,255,255,.72);
      font-size:12px;color:var(--muted);font-weight:900;white-space:nowrap;
    }
    .ffText{margin:8px 0 0;color:var(--muted);font-size:13px;line-height:1.65}
    .ffPoints{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:8px}
    .ffPoints li{display:flex;gap:10px;align-items:flex-start}
    .pin{
      width:22px;height:22px;border-radius:999px;
      background: rgba(245,158,11,.18);
      border:1px solid rgba(245,158,11,.25);
      display:flex;align-items:center;justify-content:center;
      font-weight:1000;color:#92400e;flex:0 0 auto;
      margin-top:1px;
    }
    .ffPoints b{font-size:12px;color:var(--ink)}
    .ffPoints span{display:block;font-size:12px;color:var(--muted);line-height:1.55}

    /* Contact */
    .form{display:grid;gap:10px}
    .field{display:grid;gap:6px}
    label{font-size:12px;color:var(--muted);font-weight:900}
    input, textarea, select{
      border:1px solid var(--border);background:#fff;border-radius:16px;
      padding:12px 12px;font-size:14px;outline:none;font-family:inherit;
    }
    textarea{min-height:120px;resize:vertical}
    input:focus, textarea:focus, select:focus{box-shadow: var(--ring); border-color:#e6cfae}
    .note{font-size:12px;color:var(--muted);line-height:1.6}

    /* Floating WhatsApp */
    .wa{
      position:fixed; right:16px; bottom:16px; z-index:80;
      display:flex; gap:10px; align-items:center; text-decoration:none;
    }
    .wa .bubble{
      padding:10px 12px;border-radius:999px;
      background:#111827;color:#fff;font-size:13px;
      border:1px solid rgba(255,255,255,.18);
      box-shadow: 0 18px 50px rgba(0,0,0,.22);
      max-width:min(74vw, 520px);
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    }
    .wa .btn{
      width:54px;height:54px;border-radius:20px;
      background: linear-gradient(180deg, var(--brand2), var(--brand));
      border:1px solid rgba(0,0,0,.06);
      box-shadow: var(--shadow);
      display:flex;align-items:center;justify-content:center;
      font-size:22px;color:#111827; user-select:none;
    }

    footer{
      margin-top:18px;padding:14px;border-radius: var(--radius);
      border:1px solid var(--border);background: rgba(255,255,255,.72);
      color: var(--muted);font-size:12px;
      display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;
    }

    /* Reveal */
    .reveal{opacity:0; transform: translateY(10px); transition: opacity .55s ease, transform .55s ease}
    .reveal.show{opacity:1; transform:none}

    /* Tiny toast */
    .toast{
      position:fixed; left:50%; bottom:84px; transform:translateX(-50%);
      background:#111827; color:#fff; border:1px solid rgba(255,255,255,.18);
      padding:10px 12px; border-radius:999px;
      box-shadow: 0 18px 50px rgba(0,0,0,.22);
      font-size:13px; opacity:0; pointer-events:none;
      transition: opacity .2s ease, transform .2s ease;
      max-width:min(92vw, 720px);
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
      z-index:90;
    }
    .toast.show{opacity:1; transform: translateX(-50%) translateY(-2px)}


/* ===== Media blocks (carousel + video links) ===== */
.mediaBlock{
  margin-top:12px;
  display:grid;
  gap:12px;
  grid-template-columns: 1.2fr .8fr;
  align-items:stretch;
}
@media (max-width:980px){
  .mediaBlock{grid-template-columns:1fr}
}
.videoLinks{
  border:1px solid var(--border);
  background: rgba(255,255,255,.72);
  border-radius: var(--radius);
  padding:12px;
  box-shadow: 0 14px 34px rgba(31,41,55,.10);
}
.vhead{
  font-weight:1000;
  font-size:13px;
  margin-bottom:8px;
}
.vlist{display:grid;gap:8px}
.vlink{
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.72);
  text-decoration:none;
  font-weight:900;
  font-size:12px;
  transition: transform .08s ease, box-shadow .2s ease, border-color .2s ease;
}
.vlink:hover{transform: translateY(-1px); box-shadow:0 16px 32px rgba(31,41,55,.10)}
.vlink:focus-visible{outline:none; box-shadow: var(--shadow), var(--ring)}

/* Carousel */
.carousel{
  position:relative;
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,.72);
  overflow:hidden;
  box-shadow: 0 14px 34px rgba(31,41,55,.10);
  min-height: 220px;
}
.carTrack{
  display:flex;
  width:100%;
  transition: transform .45s ease;
  will-change: transform;
}
.carousel img{
  width:100%;
  height:260px;
  object-fit:cover;
  flex:0 0 100%;
  display:block;
}
@media (max-width:520px){
  .carousel img{height:220px}
}
.carBtn{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:44px;height:44px;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.85);
  font-size:24px;
  font-weight:1000;
  cursor:pointer;
  z-index:2;
  box-shadow: 0 12px 26px rgba(31,41,55,.12);
}
.carBtn:hover{box-shadow:0 18px 34px rgba(31,41,55,.16)}
.carBtn:focus-visible{outline:none; box-shadow: var(--shadow), var(--ring)}
.carBtn.prev{left:10px}
.carBtn.next{right:10px}

.carDots{
  position:absolute;
  left:0; right:0; bottom:10px;
  display:flex;
  justify-content:center;
  gap:7px;
  z-index:2;
}
.carDot{
  width:9px;height:9px;border-radius:999px;
  border:1px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.75);
  opacity:.75;
}
.carDot.active{
  background: linear-gradient(180deg, var(--brand2), var(--brand));
  border-color: transparent;
  opacity:1;
  box-shadow: 0 0 0 4px rgba(245,158,11,.18);
}