:root{
    --coral:#FF6543;
    --yellow:#FFF179;
    --olive:#679545;
    --olive-deep:#3F5C2A;
    --cream:#FFFDF5;
    --mist:#F3F7EE;
    --ink:#2B2A1F;
    --ink-soft:#5B5940;
    --font-display:'Noto Serif TC', serif;
    --font-body:'Work Sans', sans-serif;
    --font-mono:'IBM Plex Mono', monospace;
    --maxw:1120px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--cream);
    color:var(--ink);
    font-family:var(--font-body);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{font-family:var(--font-display);font-weight:900;margin:0;letter-spacing:.01em;}
  a{color:inherit;}
  img{max-width:100%;display:block;}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
  .eyebrow{
    font-family:var(--font-mono);
    font-size:12px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--coral);
    margin:0 0 14px;
  }
  a:focus-visible, button:focus-visible, summary:focus-visible{
    outline:2px solid var(--coral);
    outline-offset:3px;
  }

  /* ---------- NAV ---------- */
  .nav{
    position:sticky; top:0; z-index:50;
    background:rgba(255,253,245,.92);
    backdrop-filter:blur(6px);
    border-bottom:1px solid rgba(103,149,69,.2);
  }
  .nav-inner{
    max-width:var(--maxw); margin:0 auto; padding:12px 24px;
    display:flex; align-items:center; justify-content:space-between;
  }
  .wordmark{
    text-decoration:none;
    font-family:var(--font-display);
    font-weight:700;
    font-size:20px;
    color:var(--ink);
    display:flex; align-items:center; gap:10px;
  }
  .wordmark img{width:34px; height:34px;}
  .wordmark span{font-size:12px;font-family:var(--font-mono);color:var(--olive-deep);letter-spacing:.14em;}
  .nav-links{display:flex; align-items:center; gap:28px; font-size:14px;}
  .nav-links a{text-decoration:none;opacity:.85;}
  .nav-links a:hover{opacity:1;color:var(--coral);}
  .nav-cta{
    background:var(--coral); color:var(--cream) !important;
    padding:9px 20px; border-radius:999px; opacity:1 !important;
    font-family:var(--font-mono); font-size:12px; letter-spacing:.06em;
  }
  .nav-cta:hover{background:#e2532f;}
  .nav-toggle{
    display:none; background:none; border:1.5px solid var(--olive);
    color:var(--ink); font-size:18px; padding:6px 10px; border-radius:10px;
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative; overflow:hidden;
    padding:100px 24px 90px;
    text-align:center;
    background:
      radial-gradient(circle at 50% 0%, rgba(255,241,121,.65), transparent 80%),
      var(--cream);
  }
  .tile-bg{
    position:absolute; inset:0; z-index:0; opacity:.16;
    background-image:
    background-position:0 0, 24px 24px;
  }
  .hero-content{position:relative; z-index:1; max-width:640px; margin:0 auto;}
  .hero-logo{width:110px; height:110px; margin:0 auto 22px;}
  .hero h1{font-size:clamp(48px,9vw,84px); letter-spacing:.06em;}
  .hero .tagline{
    font-family:var(--font-display); font-weight:700;
    font-size:clamp(18px,3vw,24px); color:var(--coral); margin:18px 0 16px;
  }
  .hero-desc{color:var(--ink-soft); font-size:16px; max-width:460px; margin:0 auto 34px;}
  .hero-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
  .btn{
    display:inline-block; padding:13px 28px; border-radius:999px;
    text-decoration:none; font-size:14px; font-family:var(--font-mono);
    letter-spacing:.05em; transition:transform .15s ease, background .15s ease;
  }
  .btn:hover{transform:translateY(-2px);}
  .btn-primary{background:var(--coral); color:var(--cream);}
  .btn-primary:hover{background:#e2532f;}
  .btn-ghost{border:1.5px solid var(--olive); color:var(--ink);}
  .btn-ghost:hover{border-color:var(--coral); color:var(--coral);}

  /* ---------- PETAL DIVIDER ---------- */
  .tile-divider{
    display:flex; justify-content:center; gap:10px;
    padding:24px 0; background:var(--cream);
    border-top:1px solid rgba(103,149,69,.18);
    border-bottom:1px solid rgba(103,149,69,.18);
  }
  .tile-divider span{
    width:14px; height:14px; border-radius:50%;
    background:var(--olive);
  }
  .tile-divider span:nth-child(3n+2){background:var(--coral);}
  .tile-divider span:nth-child(3n+3){background:var(--yellow); border:1px solid rgba(103,149,69,.35);}

  /* ---------- SECTIONS ---------- */
  .section{padding:88px 24px;}
  .section.alt{background:var(--mist);}
  .section h2{font-size:clamp(28px,4vw,40px); margin-bottom:20px;}
  .reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease;}
  .reveal.in-view{opacity:1; transform:translateY(0);}
  @media (prefers-reduced-motion:reduce){
    .reveal{opacity:1; transform:none; transition:none;}
    html{scroll-behavior:auto;}
  }

  /* ABOUT */
  .about-grid{
    max-width:var(--maxw); margin:0 auto; display:grid;
    grid-template-columns:1.3fr 1fr; gap:56px; align-items:start;
  }
  .about-grid p{max-width:52ch; color:var(--ink-soft);}
  .stat-panel{
    background:var(--olive); border:1px solid rgba(255,255,255,.15);
    padding:26px; border-radius:16px; font-family:var(--font-mono); font-size:13px; color:var(--cream);
  }
  .stat-panel div{padding:12px 0; border-bottom:1px solid rgba(255,255,255,.18);}
  .stat-panel div:last-child{border-bottom:none;}
  .stat-panel b{display:block; font-family:var(--font-display); font-size:22px; color:var(--yellow); margin-bottom:2px;}

  /* HOW-TO */
  .howto-grid{
    max-width:var(--maxw); margin:0 auto; display:grid;
    grid-template-columns:1fr 1fr; gap:48px; align-items:start;
  }
  .video-box{
    aspect-ratio:16/9; background:#fff; border:2px dashed rgba(103,149,69,.4);
    border-radius:18px; display:flex; align-items:center; justify-content:center;
    flex-direction:column; gap:12px; color:var(--ink-soft); text-align:center; padding:20px;
  }
  .play-icon{
    width:56px; height:56px; border-radius:50%; border:2px solid var(--coral);
    display:flex; align-items:center; justify-content:center;
  }
  .play-icon::after{
    content:""; width:0; height:0; margin-left:4px;
    border-top:10px solid transparent; border-bottom:10px solid transparent;
    border-left:16px solid var(--coral);
  }
  .video-box small{font-family:var(--font-mono); font-size:11px; opacity:.8; max-width:280px;}
  .step-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:26px;}
  .step-list li{display:flex; gap:18px;}
  .step-list h3{font-size:17px; margin-bottom:6px;}
  .step-list p{margin:0; color:var(--ink-soft); font-size:14.5px;}
  .tile-num{
    flex:none; width:38px; height:44px; border-radius:10px;
    background:#fff; border:2px solid var(--olive); position:relative;
    display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr);
    padding:6px; gap:2px;
  }
  .tile-num i{border-radius:50%; background:var(--coral);}
  /* pip layouts, styled like dice/tile dots */
  .tile-num[data-num="1"] i:nth-child(1){grid-area:2/2;}
  .tile-num[data-num="2"] i:nth-child(1){grid-area:1/1;}
  .tile-num[data-num="2"] i:nth-child(2){grid-area:3/3;}
  .tile-num[data-num="3"] i:nth-child(1){grid-area:1/1;}
  .tile-num[data-num="3"] i:nth-child(2){grid-area:2/2;}
  .tile-num[data-num="3"] i:nth-child(3){grid-area:3/3;}
  .tile-num[data-num="4"] i:nth-child(1){grid-area:1/1;}
  .tile-num[data-num="4"] i:nth-child(2){grid-area:1/3;}
  .tile-num[data-num="4"] i:nth-child(3){grid-area:3/1;}
  .tile-num[data-num="4"] i:nth-child(4){grid-area:3/3;}
  .tile-num[data-num="5"] i:nth-child(1){grid-area:1/1;}
  .tile-num[data-num="5"] i:nth-child(2){grid-area:1/3;}
  .tile-num[data-num="5"] i:nth-child(3){grid-area:2/2;}
  .tile-num[data-num="5"] i:nth-child(4){grid-area:3/1;}
  .tile-num[data-num="5"] i:nth-child(5){grid-area:3/3;}

  /* HOWTO CTA (link ke panduan PDF) */
  .howto-cta{margin-top:44px; text-align:center;}
  .howto-cta-text{color:var(--ink-soft); font-size:14.5px; margin:0 0 16px;}

  /* COMBO ILLUSTRATIONS */
  .combo-intro{max-width:var(--maxw); margin:56px auto 0;}
  .combo-intro h3{font-size:19px; margin-bottom:4px;}
  .combo-intro p{color:var(--ink-soft); font-size:14px; margin:0;}
  .combo-grid{
    max-width:var(--maxw); margin:24px auto 0; display:grid;
    grid-template-columns:repeat(3,1fr); gap:20px;
  }
  .combo-card{
    background:#fff; border:1.5px solid rgba(103,149,69,.3);
    border-radius:18px; padding:22px 18px; text-align:center;
  }
  .combo-card h4{
    font-family:var(--font-mono); font-size:11px; letter-spacing:.12em;
    text-transform:uppercase; color:var(--coral); margin:0 0 4px;
  }
  .combo-sub{font-family:var(--font-display); font-weight:700; font-size:15px; margin:0 0 18px;}
  .combo-caption{font-size:12.5px; color:var(--ink-soft); margin:0;}
  .tile-row{display:flex; gap:8px; justify-content:center; margin-bottom:16px;}
  .tile-face{
    width:44px; height:60px; background:#fff; border-radius:8px;
    border:1px solid rgba(103,149,69,.3);
    box-shadow:0 2px 6px rgba(43,42,31,.12);
    display:flex; align-items:center; justify-content:center; position:relative; flex:none;
  }
  .tile-face.dots{
    padding:6px; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); gap:2px;
  }
  .tile-face.dots i{width : 8px; height: 8px; border-radius:50%; background:var(--coral);}
  .tile-face.dots[data-num="3"] i:nth-child(1){grid-area:1/1;}
  .tile-face.dots[data-num="3"] i:nth-child(2){grid-area:2/2;}
  .tile-face.dots[data-num="3"] i:nth-child(3){grid-area:3/3;}
  .tile-face.dots[data-num="4"] i:nth-child(1){grid-area:1/1;}
  .tile-face.dots[data-num="4"] i:nth-child(2){grid-area:1/3;}
  .tile-face.dots[data-num="4"] i:nth-child(3){grid-area:3/1;}
  .tile-face.dots[data-num="4"] i:nth-child(4){grid-area:3/3;}
  .tile-face.dots[data-num="5"] i:nth-child(1){grid-area:1/1;}
  .tile-face.dots[data-num="5"] i:nth-child(2){grid-area:1/3;}
  .tile-face.dots[data-num="5"] i:nth-child(3){grid-area:2/2;}
  .tile-face.dots[data-num="5"] i:nth-child(4){grid-area:3/1;}
  .tile-face.dots[data-num="5"] i:nth-child(5){grid-area:3/3;}
  .tile-face.bamboo{gap:3px; padding:8px 7px;}
  .tile-face.bamboo i{width:5px; height:100%; border-radius:3px; background:var(--olive);}
  .tile-face.char{
    flex-direction:column; font-family:var(--font-display); color:var(--ink); line-height:1.1;
  }
  .tile-face.char .num{font-size:20px; font-weight:900;}
  .tile-face.char .suit{font-size:12px; font-weight:700; color:var(--coral);}

  /* VENUES */
  .venue-grid{
    max-width:var(--maxw); margin:0 auto; display:grid;
    grid-template-columns:repeat(3,1fr); gap:22px;
  }
  .venue-card{
    background:#fff; border:1.5px solid rgba(103,149,69,.3);
    padding:22px; border-radius:16px;
  }
  .venue-card h3{font-size:18px; margin-bottom:6px;}
  .venue-card p{margin:0; color:var(--ink-soft); font-size:13.5px;}
  .tag{
    display:inline-block; margin-top:12px; font-family:var(--font-mono);
    font-size:11px; letter-spacing:.05em; color:var(--olive-deep);
    background:rgba(103,149,69,.1);
    border:1px solid rgba(103,149,69,.4); padding:4px 10px; border-radius:999px;
  }

  /* PARTNER */
  .partner-grid{
    max-width:var(--maxw); margin:0 auto; display:grid;
    grid-template-columns:1.3fr 1fr; gap:48px; align-items:center;
  }
  .partner-grid p{color:var(--ink-soft); max-width:50ch;}

  /* GALLERY */
  .gallery-grid{
    max-width:var(--maxw); margin:0 auto; display:grid;
    grid-template-columns:repeat(4,1fr); gap:16px;
  }
  .gallery-item{
    aspect-ratio:1; background:linear-gradient(155deg,#FFF3EC,#FFFBEA);
    border:2px dashed rgba(103,149,69,.35); border-radius:16px;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-mono); font-size:11px; color:var(--ink-soft);
    text-align:center; padding:10px;
  }

  /* FAQ */
  .faq-list{max-width:760px; margin:0 auto;}
  details{
    border-bottom:1px solid rgba(103,149,69,.25); padding:18px 0;
  }
  summary{
    cursor:pointer; font-family:var(--font-display); font-weight:700;
    font-size:16px; list-style:none; display:flex; justify-content:space-between;
  }
  summary::-webkit-details-marker{display:none;}
  summary::after{content:"+"; color:var(--coral); font-family:var(--font-mono);}
  details[open] summary::after{content:"–";}
  details p{color:var(--ink-soft); font-size:14.5px; margin:12px 0 0;}

  /* FOOTER */
  .footer{
    background:var(--olive); color:var(--cream); padding:64px 24px 32px;
  }
  .footer .wordmark{color:var(--cream);}
  .footer .wordmark span{color:var(--yellow);}
  .footer-inner{
    max-width:var(--maxw); margin:0 auto; display:flex; justify-content:space-between;
    flex-wrap:wrap; gap:32px;
  }
  .footer-col small{color:rgba(255,253,245,.75); font-family:var(--font-mono); font-size:12px;}
  .footer-links{display:flex; gap:18px; margin-top:10px;}
  .footer-links a{text-decoration:none; font-size:13px; opacity:.9;}
  .footer-links a:hover{color:var(--yellow); opacity:1;}
  .footer-bottom{
    max-width:var(--maxw); margin:40px auto 0; padding-top:20px;
    border-top:1px solid rgba(255,253,245,.2); font-family:var(--font-mono);
    font-size:11px; color:rgba(255,253,245,.75); text-align:center;
  }

  @media (max-width:820px){
    .nav-links{
      position:fixed; inset:58px 0 auto 0; background:var(--cream);
      flex-direction:column; align-items:flex-start; padding:20px 24px;
      border-bottom:1px solid rgba(103,149,69,.2); display:none; gap:18px;
    }
    .nav-links.open{display:flex;}
    .nav-toggle{display:block;}
    .about-grid, .howto-grid, .partner-grid{grid-template-columns:1fr;}
    .venue-grid, .combo-grid{grid-template-columns:repeat(2,1fr);}
    .gallery-grid{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:520px){
    .combo-grid{grid-template-columns:1fr;}
  }