@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--paper:#f8f9f4;--ink:#173e34;--muted:#717b72;--line:#dce2d7;--lime:#d8f385}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:15px;line-height:1.6}button,input{font:inherit}a{color:inherit;text-decoration:none}button{cursor:pointer}button:disabled{opacity:.6;cursor:wait}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #829f33;outline-offset:5px}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:'Manrope',sans-serif}h1,h2{font-weight:600;letter-spacing:-2.7px;line-height:1.12}em{font-family:Georgia,serif;font-weight:400}p{color:var(--muted)}.wrap{width:min(1200px,calc(100% - 96px));margin-inline:auto}.header{height:108px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.brand{font-family:'Manrope',sans-serif;font-size:27px;font-weight:800;letter-spacing:-1.5px;display:inline-flex;align-items:center}.brand-light{font-weight:400}.brand-dot{font-size:10px;align-self:flex-start;margin:7px 0 0 3px;letter-spacing:0}.brand-icon{width:33px;height:33px;border-radius:9px;background:var(--ink);color:var(--lime);font-size:35px;font-style:italic;line-height:37px;margin-right:9px;position:relative;text-align:center}.brand-icon span{position:absolute;font-size:15px;top:-7px;right:-5px;color:var(--ink)}nav{display:flex;gap:34px;font-size:13px}nav a:hover,.text-link:hover{color:#7a941e}.button{display:inline-flex;justify-content:space-between;align-items:center;gap:24px;min-height:51px;padding:13px 22px;border-radius:7px;border:1px solid transparent;font-size:13px;font-weight:600;line-height:1.5;transition:transform .2s,background .2s}.button:hover{transform:translateY(-2px)}.button span{font-size:20px;line-height:1}.dark{background:var(--ink);color:white}.dark:hover{background:#245846}.small{min-height:43px;padding:10px 18px}.lime{background:var(--lime);color:var(--ink)}.lime:hover{background:#e4ffa4}.outline{border-color:#cdd5c9;color:var(--ink);background:transparent}.outline:hover{background:#edf1e6}.text-link{border:0;background:none;padding:0;color:var(--ink);font-size:13px;font-weight:600}.text-link span{margin-left:16px}.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:700;display:block}.status-dot{display:inline-block;width:7px;height:7px;background:#8eac50;border-radius:50%;margin-right:7px}.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:35px;padding-top:70px;padding-bottom:75px;align-items:center}.hero h1{font-size:76px;position:relative;margin:25px 0}.hero h1 em{color:#638151}.spark{font-family:Arial,sans-serif;font-size:63px;color:#adc975;position:absolute;right:42px;bottom:14px}.hero-copy>p{max-width:410px;font-size:14px;line-height:1.9}.hero-actions{display:flex;align-items:center;gap:26px;margin-top:30px}.hero-note{display:flex;gap:19px;margin-top:26px;color:#75826c;font-size:10px}.hero-art{position:relative;min-height:475px;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse,#e8eddb 15%,transparent 68%)}.orbit{position:absolute;border:1px solid #dfe6d3;border-radius:50%;width:435px;height:435px;transform:rotate(-20deg)}.orbit-two{width:340px;height:340px}.ticket{position:absolute;border-radius:15px;box-shadow:0 25px 50px #21392718;overflow:hidden;width:355px}.ticket-back{background:var(--lime);height:280px;transform:rotate(-13deg);top:56px;left:23px;padding:24px;color:#38512e}.ticket-back>span{font-size:9px;letter-spacing:2px}.ticket-back>b{display:block;font-size:38px;line-height:1.1;letter-spacing:-2px;margin-top:18px}.ticket-back>div{font-size:8px;letter-spacing:2px;margin-top:22px}.ticket-front{background:#1c4a3e;color:white;transform:rotate(8deg);right:2px;top:132px}.ticket-top{display:flex;justify-content:space-between;padding:20px 21px;border-bottom:1px solid #ffffff24;font-size:10px;letter-spacing:1px}.ticket-top span:last-child{font-size:8px;color:var(--lime)}.ticket-top i{display:inline-block;width:5px;height:5px;background:var(--lime);border-radius:50%}.ticket-main{text-align:center;padding:25px 18px 15px}.ticket-main>span{font-size:8px;letter-spacing:2.5px;color:#c5d4c1}.draw-numbers{display:flex;gap:8px;justify-content:center;margin-top:14px}.draw-numbers b{font-family:'Manrope',sans-serif;display:block;border-radius:6px;background:#f6f9ed;color:#244d3a;font-size:53px;line-height:1.3;width:63px;font-weight:600;box-shadow:inset 0 -5px 0 #dce4cf}.ticket-main p{color:#c1d3c5;font-size:10px;margin:17px 0 5px}.ticket-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px dashed #ffffff38;padding:12px 22px;font-size:8px;letter-spacing:2px}.ticket-bottom span:last-child{font-size:20px;color:var(--lime)}.floating-star{position:absolute;right:15px;top:40px;font-size:77px;color:#8da35c;line-height:1;transform:rotate(12deg)}.winner-pill{display:flex;align-items:center;gap:12px;position:absolute;background:white;border:1px solid #e9eddf;border-radius:9px;padding:13px 18px;bottom:25px;left:15px;box-shadow:0 8px 20px #1633220d;transform:rotate(-5deg);font-size:11px;line-height:1.5}.winner-pill>span{font-size:30px;color:#82994b}.art-caption{position:absolute;right:2px;bottom:4px;font-size:7px;letter-spacing:1.5px;color:#8e9888}.confetti{position:absolute;width:9px;height:18px;border-radius:2px;background:#a5b578;transform:rotate(30deg)}.c1{top:20px;left:120px}.c2{bottom:38px;right:12px;background:#d2a471;transform:rotate(-32deg)}.c3{bottom:100px;left:0;width:7px;height:7px;background:#c8d587}.occasion-strip{border-block:1px solid var(--line);padding:23px 0}.occasion-strip>.wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}.occasion-strip span{font-size:8px;letter-spacing:1.4px;max-width:115px}.occasion-strip b{font-size:12px;font-weight:500}.occasion-strip i{font-style:normal;color:#9fae83}.section{padding-top:85px;padding-bottom:80px}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:42px}h2{font-size:47px;margin:17px 0 0}.section-heading>p{font-size:13px;line-height:1.8;margin-bottom:5px}.package-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.package-card{position:relative;border:1px solid var(--line);border-radius:12px;padding:29px;background:#fdfef9;display:flex;flex-direction:column}.package-icon{font-size:27px;line-height:1;display:flex;align-items:center;justify-content:center;width:42px;height:42px;background:#edf2e4;border-radius:50%;margin-bottom:23px}.capacity{font-family:'Manrope',sans-serif;font-size:30px;font-weight:600;letter-spacing:-1px}.capacity span{font-family:'DM Sans',sans-serif;font-size:13px;font-weight:400;letter-spacing:0}.package-sub{font-size:11px;margin-bottom:23px}.price{font-family:'Manrope',sans-serif;font-size:27px;letter-spacing:-1.2px;font-weight:600;line-height:1.3}.price-note{font-size:10px;color:#81907d;margin-top:5px}.card-line{height:1px;background:var(--line);margin:23px 0 20px}.package-card ul{list-style:none;margin:0 0 25px;padding:0;font-size:11px;color:#697c66;line-height:2.3}.package-card li:before{content:'✓';margin-right:9px;color:#7a925c}.package-card>.button{width:100%;margin-top:auto;min-height:45px}.popular{background:var(--ink);color:white;border-color:var(--ink)}.popular-label{position:absolute;top:-1px;left:26px;right:26px;text-align:center;border-radius:0 0 6px 6px;background:var(--lime);color:var(--ink);font-size:8px;letter-spacing:1.2px;padding:6px}.popular .package-icon{margin-top:10px;background:#355b44;color:var(--lime);margin-bottom:13px}.popular .package-sub,.popular .price-note,.popular ul{color:#c0d0bc}.popular .card-line{background:#446348}.popular li:before{color:var(--lime)}.custom-card{background:#eff2e5}.package-footnote{font-size:10px;text-align:center;margin:23px 0 0}.how-section{background:#eef1e7;border-block:1px solid var(--line)}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:45px}.steps article{border-top:1px solid #c9d2bf;padding-top:20px}.steps span{font-size:10px;letter-spacing:1.4px;color:#82936c}.steps h3{font-size:18px;font-weight:600;letter-spacing:-.5px;margin:22px 0 12px}.steps p{font-size:12px;line-height:1.9;max-width:295px}.faq-section{display:grid;grid-template-columns:1fr 1.15fr;gap:70px}.faq-section>div>p{font-size:13px;margin-top:22px}.faq-list details{border-bottom:1px solid var(--line);padding:21px 0}.faq-list details:first-child{padding-top:0}.faq-list summary{cursor:pointer;font-size:14px;font-weight:500;list-style:none;display:flex;gap:20px;justify-content:space-between}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary:after{content:'+';font-size:20px;font-weight:400;line-height:1}.faq-list details[open] summary:after{content:'−'}.faq-list p{font-size:12px;line-height:1.85;max-width:470px;margin:16px 0 0}.closing{position:relative;background:var(--ink);color:white;display:flex;justify-content:space-between;align-items:center;padding:44px 49px;border-radius:13px;overflow:hidden}.closing .eyebrow{color:#bbd0aa;font-size:8px}.closing h2{font-size:39px;position:relative;z-index:1}.closing h2 em{color:var(--lime)}.closing>.button{z-index:1;min-width:205px}.closing-star{position:absolute;color:#305440;font-size:220px;right:200px;top:-62px;line-height:1.5}.footer{display:flex;justify-content:space-between;align-items:center;padding-block:37px;margin-top:20px;gap:20px}.footer .brand{font-size:23px}.footer>span{font-size:10px;color:#819078}dialog{border:1px solid var(--line);border-radius:15px;padding:30px;width:min(620px,calc(100% - 32px));max-height:90dvh;color:var(--ink);background:var(--paper);box-shadow:0 30px 100px #13271c30}dialog::backdrop{background:#152d2466;backdrop-filter:blur(5px)}body:has(dialog[open]){overflow:hidden}.modal-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}.modal-head h2{font-size:28px;letter-spacing:-1px;margin:7px 0 0}.close-modal{font-size:28px;border:0;background:#e9eedf;color:var(--ink);border-radius:50%;width:36px;height:36px;line-height:1;flex-shrink:0}.order-selection{display:flex;justify-content:space-between;padding:14px 17px;background:#e9efda;border-radius:7px;font-size:13px;margin-bottom:23px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-grid label{display:flex;flex-direction:column;font-size:12px;font-weight:500;gap:7px}.form-grid .full{grid-column:1/-1}input{min-width:0;width:100%;padding:12px;border:1px solid #d5decb;border-radius:6px;background:white;color:var(--ink);outline:none;font-size:13px}input:focus{border-color:#789547;box-shadow:0 0 0 3px #a5c75b22}input::placeholder{color:#9aa28f}.form-notice,.private-note{font-size:10px;line-height:1.7;margin:20px 0}.submit-order{width:100%}.form-error{background:#fce5dc;color:#9c3420;padding:12px;font-size:12px;border-radius:6px}.setup-notice{background:#eef1e7;border:1px solid #d9e0cf;padding:14px;border-radius:6px;font-size:12px;color:#6e7e60}#custom-dialog>p{font-size:14px}.invoice-body{background:#f0f3e9}.invoice-wrap{width:min(1100px,calc(100% - 64px));margin:45px auto 70px}.invoice-heading{margin-bottom:32px}.invoice-heading h1{font-size:43px;margin:14px 0}.invoice-heading p{font-size:13px}.invoice-layout{display:grid;grid-template-columns:1.5fr 1fr;gap:25px;align-items:start}.invoice-card{background:#fff;border:1px solid var(--line);padding:30px;border-radius:12px}.invoice-top{display:flex;gap:12px;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:25px;align-items:start}.invoice-top h2{font-size:18px;letter-spacing:-.5px;margin:8px 0}.invoice-top small{font-size:10px;color:var(--muted)}.payment-status{font-size:9px;white-space:nowrap;border-radius:20px;padding:5px 10px;color:#8b641a;background:#fff3d0}.invoice-customer{margin:25px 0}.invoice-customer h3{margin:7px 0;font-size:17px}.invoice-customer p{font-size:12px}.event-details{background:#f5f7f0;padding:17px;border-radius:7px;font-size:12px;display:grid;gap:10px}.event-details>div{display:grid;grid-template-columns:125px 1fr;gap:10px}.event-details dt{color:var(--muted)}.event-details dd{margin:0;overflow-wrap:anywhere}.invoice-item{display:flex;justify-content:space-between;gap:20px;padding:25px 0;border-bottom:1px solid var(--line);font-size:12px}.invoice-item span{display:block;font-size:10px;color:var(--muted);margin-top:5px}.invoice-item>b{white-space:nowrap}.invoice-total{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0}.invoice-total span{font-size:13px}.invoice-total b{font-size:25px;letter-spacing:-1px}.invoice-tools{display:flex;gap:20px;align-items:center;margin-top:15px}.invoice-tools .button{font-size:11px;min-height:40px;padding:10px 15px}.invoice-tools .text-link{font-size:11px}.payment-card h2{font-size:27px;letter-spacing:-1px;margin:12px 0}.payment-card>p{font-size:12px}.qris-box{border:1px solid var(--line);padding:14px;border-radius:8px;margin:22px 0 15px;background:white}.qris-box img{display:block;width:100%;height:auto;max-height:480px;object-fit:contain}.qris-placeholder{text-align:center;padding:20px 5px;background:#f6f8f1}.qris-placeholder>span{display:block;font-size:47px;line-height:1.3;color:#a4b290}.qris-placeholder>b{font-size:13px}.qris-placeholder p{font-size:11px;margin:8px 0}.merchant{text-align:center}.pay-amount{background:#edf4dc;padding:16px;text-align:center;border-radius:7px}.pay-amount>span{display:block;font-size:10px;color:var(--muted)}.pay-amount>b{display:block;font-size:27px;letter-spacing:-1px}.pay-amount .text-link{font-size:10px;text-decoration:underline}.payment-steps{font-size:11px;color:var(--muted);padding-left:18px;line-height:1.9;margin:21px 0}.payment-card>.button{width:100%}.private-note{color:#85907b;margin-bottom:0;overflow-wrap:anywhere}
@media(max-width:1100px){.wrap{width:calc(100% - 64px)}.hero h1{font-size:65px}.spark{right:5px;font-size:50px}.hero-art{transform:scale(.86);transform-origin:center;min-width:0}.ticket-front{right:-30px}.ticket-back{left:-15px}.orbit{width:390px;height:390px}.hero-note{gap:12px;font-size:9px}.package-card{padding:24px}.price{font-size:24px}.occasion-strip b{font-size:10px}.invoice-wrap{width:calc(100% - 40px)}.invoice-card{padding:23px}.invoice-top{flex-direction:column}.closing-star{right:150px}}
@media(max-width:800px){.header{height:85px}nav{gap:20px;font-size:11px}.header>.button{display:none}.hero{gap:10px;grid-template-columns:1fr 1fr;padding-top:45px;padding-bottom:45px}.hero h1{font-size:52px;letter-spacing:-2px}.hero-copy>p{font-size:12px}.hero .eyebrow{font-size:8px;letter-spacing:1px}.hero-actions{align-items:flex-start;flex-direction:column;gap:18px}.hero-note{flex-direction:column;gap:4px}.hero-art{transform:scale(.7);margin-left:-15px}.spark{display:none}.occasion-strip>.wrap{flex-wrap:wrap;justify-content:center;gap:13px}.occasion-strip span{max-width:none;width:100%;text-align:center}.section{padding-block:60px}h2{font-size:38px}.section-heading>p{font-size:11px}.package-grid{grid-template-columns:repeat(2,1fr)}.steps{gap:20px}.steps h3{font-size:16px}.faq-section{gap:35px}.faq-section h2{font-size:34px}.closing{padding:33px;gap:25px}.closing h2{font-size:31px}.closing>.button{min-width:180px}.closing-star{right:80px}.footer>span:nth-child(2){display:none}.invoice-layout{grid-template-columns:1fr}.invoice-top{flex-direction:row}.invoice-heading h1{font-size:36px}.qris-box{max-width:310px;margin-inline:auto}}
@media(max-width:560px){.wrap{width:calc(100% - 40px)}.header{height:78px}.brand{font-size:24px}.brand-icon{width:29px;height:29px;font-size:30px;line-height:32px}nav{gap:15px;font-size:10px}nav a:first-child{display:none}.hero{display:flex;flex-direction:column;align-items:stretch;padding-top:35px;padding-bottom:20px;gap:0}.hero h1{font-size:64px;letter-spacing:-2.5px;margin:22px 0}.hero-copy>p{font-size:13px;max-width:350px}.hero-actions{flex-direction:row;align-items:center;gap:20px;margin-top:23px}.hero-actions>.button{padding-inline:16px;font-size:12px}.hero-actions>.text-link{font-size:11px}.hero-note{flex-direction:row;flex-wrap:wrap;gap:13px;margin-top:20px;font-size:9px}.hero-art{height:360px;min-height:360px;transform:scale(.8);margin:0 -15px;transform-origin:center center}.ticket-front{right:-5px;top:100px}.ticket-back{left:-6px;top:22px}.floating-star{right:0;top:4px}.winner-pill{bottom:-5px;left:0}.art-caption{bottom:-24px}.orbit{width:360px;height:360px}.occasion-strip{padding:20px 0}.occasion-strip>.wrap{gap:8px 12px}.occasion-strip b{font-size:9px}.occasion-strip i:last-of-type,.occasion-strip b:last-child{display:none}.section-heading{display:block;margin-bottom:30px}.section-heading>p{margin-top:20px;font-size:12px}.section-heading>p br{display:none}h2{font-size:39px}.eyebrow{font-size:8px;letter-spacing:1.5px}.package-grid{grid-template-columns:1fr;gap:20px}.package-card{padding:27px}.package-icon{margin-bottom:17px}.capacity{font-size:32px}.price{font-size:29px}.package-sub{margin-bottom:20px}.package-card ul{font-size:12px}.package-card>.button{min-height:48px}.popular .package-icon{margin-top:12px}.package-footnote{font-size:10px;text-align:left}.steps{grid-template-columns:1fr;gap:20px}.steps h3{margin-top:14px;font-size:19px}.steps p{max-width:none}.faq-section{grid-template-columns:1fr;gap:25px}.faq-section h2{font-size:39px}.faq-list summary{font-size:13px}.closing{padding:29px 24px;flex-direction:column;align-items:flex-start;gap:25px}.closing h2{font-size:32px}.closing-star{right:-25px;top:10px}.footer{padding-block:25px;margin-top:10px}.footer .brand{font-size:21px}.footer>span{font-size:9px}dialog{padding:23px 20px}.modal-head h2{font-size:25px}.form-grid{grid-template-columns:1fr;gap:12px}.order-selection{font-size:11px;padding:12px;gap:10px}.form-grid input{font-size:16px;padding:10px}.form-notice{font-size:10px}.submit-order{font-size:11px;padding-inline:15px}.invoice-wrap{margin:30px auto 45px}.invoice-heading h1{font-size:33px}.invoice-card{padding:22px 19px}.invoice-top{flex-direction:column}.invoice-top h2{font-size:17px}.event-details>div{grid-template-columns:105px 1fr;font-size:11px}.invoice-item{font-size:11px;gap:12px}.invoice-total b{font-size:24px}.invoice-tools{gap:15px}.invoice-tools .button{padding:10px;font-size:10px}.invoice-tools .text-link{font-size:10px}.invoice-heading p{font-size:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}@media print{body.invoice-body{background:white}.invoice-body .header,.invoice-body .footer,.invoice-tools,.invoice-heading,.payment-card,.private-note{display:none!important}.invoice-wrap{margin:0;width:100%}.invoice-layout{display:block}.invoice-card{border:0;padding:0}.invoice-top{flex-direction:row}.invoice-item,.invoice-total{break-inside:avoid}@page{size:A4;margin:20mm}}

/* Responsive layout: keep grid content shrinkable and controls easy to tap. */
@media screen {
  .hero > *, .section-heading > *, .package-grid > *, .steps > *,
  .faq-section > *, .invoice-layout > *, .form-grid > *, .invoice-top > * {
    min-width: 0;
  }
  .package-card, .invoice-card, .invoice-heading, .modal-head, .order-selection {
    overflow-wrap: anywhere;
  }
  .hero-actions, .hero-note, .invoice-tools { flex-wrap: wrap; }
  .close-modal { width: 44px; height: 44px; }
  dialog {
    max-width: calc(100% - 24px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
  .form-grid input { min-height: 48px; font-size: 16px; }
  .form-grid label { font-size: 13px; }
  .form-notice, .private-note { font-size: 12px; }
  .invoice-customer p { overflow-wrap: anywhere; }
  .faq-list summary { min-height: 44px; align-items: center; }
  .faq-list summary::after { flex-shrink: 0; }
}

@media screen and (min-width: 601px) and (max-width: 1100px) {
  .wrap { width: calc(100% - 48px); }
  .package-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .package-card { padding: 28px; }
  .capacity { font-size: 32px; }
  .price { font-size: 28px; }
  .package-sub, .price-note { font-size: 12px; }
  .package-card ul { font-size: 13px; line-height: 2; }
  .package-card > .button { min-height: 48px; font-size: 14px; }
  .popular-label { font-size: 10px; }
  .section-heading { gap: 24px; }
  .section-heading > p { font-size: 14px; }
  .occasion-strip > .wrap { flex-wrap: wrap; justify-content: center; gap: 12px 20px; }
  .occasion-strip span { width: 100%; max-width: none; text-align: center; }
  .occasion-strip b { font-size: 12px; }
  .invoice-layout { grid-template-columns: minmax(0, 1fr); }
  .invoice-card { padding: 30px; }
  .invoice-top { flex-direction: row; flex-wrap: wrap; }
  .qris-box { max-width: 360px; margin-inline: auto; }
}

@media screen and (max-width: 900px) {
  .header { min-height: 80px; height: auto; padding-block: 16px; gap: 16px; }
  .header > .button { display: none; }
  nav { gap: 24px; font-size: 13px; }
  nav a { display: inline-flex; min-height: 44px; align-items: center; }
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding-top: 42px;
    padding-bottom: 36px;
  }
  .hero-copy { width: 100%; max-width: 620px; margin-inline: auto; }
  .hero h1 { font-size: clamp(44px, 9vw, 72px); letter-spacing: -2px; }
  .hero-copy > p { max-width: 550px; font-size: 16px; line-height: 1.8; }
  .hero .eyebrow { font-size: 10px; letter-spacing: 1.3px; }
  .spark { display: none; }
  .hero-actions { flex-direction: row; align-items: center; gap: 20px; }
  .hero-actions .button { font-size: 14px; }
  .hero-actions .text-link { font-size: 13px; min-height: 44px; display: inline-flex; align-items: center; }
  .hero-note { flex-direction: row; gap: 10px 18px; font-size: 12px; }
  .hero-art {
    width: 100%;
    max-width: 500px;
    height: clamp(335px, 85vw, 460px);
    min-height: 0;
    margin: 0 auto;
    transform: none;
    overflow: hidden;
    overflow: clip;
  }
  .ticket { width: 74%; max-width: 355px; }
  .ticket-back { top: 9%; left: 9%; height: 62%; padding: clamp(16px, 4vw, 24px); }
  .ticket-back > b { font-size: clamp(26px, 7vw, 38px); }
  .ticket-front { top: 29%; right: 7%; }
  .ticket-top { padding: 16px; font-size: 9px; }
  .ticket-main { padding: 20px 14px 12px; }
  .draw-numbers { gap: 6px; }
  .draw-numbers b { width: auto; flex: 1; min-width: 0; max-width: 63px; font-size: clamp(28px, 9vw, 53px); }
  .ticket-bottom { padding: 10px 16px; font-size: 7px; letter-spacing: 1.5px; }
  .orbit { width: 90%; height: auto; aspect-ratio: 1; }
  .orbit-two { width: 70%; }
  .floating-star { top: 0; right: 3%; font-size: clamp(48px, 12vw, 77px); }
  .winner-pill { left: 5%; bottom: 6%; padding: 10px 14px; }
  .art-caption { bottom: 0; right: 5%; }
  .c1 { left: 24%; top: 0; }
  .c2 { right: 3%; bottom: 12%; }
  .c3 { left: 3%; bottom: 30%; }
  .steps { gap: 24px; }
  .steps h3 { font-size: 18px; }
  .steps p { font-size: 14px; max-width: none; }
  .faq-section { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .faq-list p { font-size: 14px; max-width: none; }
  .faq-list summary { font-size: 15px; }
  .closing { gap: 24px; flex-wrap: wrap; padding: 36px; }
  .closing h2 { font-size: clamp(30px, 5vw, 40px); }
}

@media screen and (max-width: 600px) {
  .wrap, .invoice-wrap { width: calc(100% - 32px); }
  .header { gap: 12px; min-height: 76px; padding-block: 10px; }
  .brand { font-size: 24px; white-space: nowrap; flex-shrink: 0; }
  nav { gap: 16px; font-size: 12px; }
  nav a:first-child { display: none; }
  .header > .text-link { font-size: 12px; min-height: 44px; display: inline-flex; align-items: center; }
  .hero h1 { margin-block: 22px; }
  .hero-copy > p { font-size: 15px; }
  .hero-note { font-size: 11px; gap: 8px 14px; }
  .section { padding-block: 50px; }
  .section-heading { display: block; margin-bottom: 28px; }
  h2, .faq-section h2 { font-size: clamp(30px, 8vw, 40px); letter-spacing: -1.5px; }
  .eyebrow { font-size: 10px; letter-spacing: 1.3px; }
  .section-heading > p { font-size: 14px; margin-top: 18px; }
  .section-heading > p br { display: none; }
  .package-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .package-card { padding: 26px; }
  .package-sub, .price-note { font-size: 12px; }
  .package-card ul { font-size: 13px; line-height: 2; }
  .package-card > .button { font-size: 14px; min-height: 50px; }
  .popular-label { font-size: 10px; left: 20px; right: 20px; }
  .popular .package-icon { margin-top: 16px; }
  .package-footnote { font-size: 12px; text-align: left; }
  .occasion-strip > .wrap { gap: 10px 14px; }
  .occasion-strip span { font-size: 9px; }
  .occasion-strip b { font-size: 11px; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .steps span { font-size: 11px; }
  .steps h3 { font-size: 20px; margin-top: 16px; }
  .faq-section > div > p { font-size: 14px; }
  .closing { padding: 28px 24px; flex-direction: column; align-items: stretch; }
  .closing > .button { width: 100%; }
  .footer { flex-wrap: wrap; padding-block: 28px; gap: 12px; }
  .footer > span { font-size: 11px; }
  dialog { width: calc(100% - 24px); padding: 22px 18px; max-height: calc(100dvh - 24px); }
  .modal-head { gap: 12px; }
  .modal-head h2 { font-size: 25px; }
  .order-selection { flex-wrap: wrap; gap: 4px 16px; font-size: 14px; padding: 14px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .submit-order { font-size: 13px; gap: 12px; padding-inline: 16px; min-height: 52px; }
  .invoice-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .invoice-wrap { margin-block: 30px 40px; }
  .invoice-heading h1 { font-size: clamp(28px, 7.5vw, 36px); letter-spacing: -1.5px; }
  .invoice-heading p { font-size: 14px; }
  .invoice-card { padding: 24px 20px; }
  .invoice-top { flex-direction: column; gap: 14px; }
  .invoice-top h2 { font-size: 18px; }
  .invoice-top small, .payment-status { font-size: 12px; }
  .invoice-customer p { font-size: 14px; }
  .event-details { padding: 16px; gap: 14px; }
  .event-details > div { grid-template-columns: minmax(0, 1fr); gap: 3px; font-size: 14px; }
  .invoice-item { flex-direction: column; gap: 12px; font-size: 14px; }
  .invoice-item span { font-size: 12px; }
  .invoice-total { flex-wrap: wrap; gap: 5px 14px; }
  .invoice-total span { font-size: 14px; }
  .invoice-total b { font-size: 27px; }
  .invoice-tools { flex-direction: column; align-items: stretch; gap: 10px; }
  .invoice-tools .button, .invoice-tools .text-link { font-size: 13px; min-height: 48px; }
  .payment-card > p, .payment-steps, .setup-notice { font-size: 13px; }
  .payment-card h2 { font-size: 28px; }
  .qris-box { padding: 10px; max-width: 360px; margin-inline: auto; }
  .pay-amount > span { font-size: 12px; }
  .pay-amount .text-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; }
}

@media screen and (max-width: 360px) {
  .brand { font-size: 21px; }
  .brand-icon { margin-right: 6px; }
  nav { gap: 12px; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 8px; }
  .hero-actions .text-link { justify-content: center; }
  .hero-note { font-size: 10px; gap: 8px; }
  .hero-art { height: 335px; }
  .ticket-top { padding: 12px 10px; font-size: 8px; letter-spacing: .5px; }
  .ticket-main { padding: 16px 10px 10px; }
  .ticket-main > span { font-size: 7px; letter-spacing: 1.5px; }
  .ticket-bottom { padding-inline: 10px; font-size: 6px; letter-spacing: 1px; }
  .package-card { padding: 24px; }
  .modal-head h2 { font-size: 22px; }
}