:root {
    --ink: #071b32;
    --muted: #607086;
    --paper: #fffaf2;
    --orange: #ff650b;
    --orange-dark: #df4e00;
    --cream: #f7ead6;
    --line: rgba(7, 27, 50, .12);
    --green: #12a66a;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background: var(--paper);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 87% 4%, rgba(255,101,11,.11), transparent 25rem), var(--paper); }
button { font: inherit; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }

.site-header { max-width: 1240px; height: 92px; margin: auto; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo { width: 56px; height: 56px; flex: 0 0 56px; display: block; object-fit: cover; border: 1px solid rgba(5,34,63,.12); border-radius: 16px; background: #fff; box-shadow: 0 12px 26px rgba(5,34,63,.12); }
.brand strong, .brand small { display: block; }
.brand strong { letter-spacing: .09em; }
.brand small { margin-top: 3px; color: var(--muted); font-size: .66rem; }
.device-status { padding: 9px 13px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .76rem; background: rgba(255,255,255,.6); }
.device-status span { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: currentColor; }
.device-status.is-online { color: var(--green); border-color: rgba(18,166,106,.2); background: rgba(18,166,106,.07); }
.device-status.is-online span { box-shadow: 0 0 10px currentColor; }
.device-status.is-offline { color: #b36b18; background: rgba(255,150,20,.08); }

main { max-width: 1240px; margin: auto; padding: 20px 28px 120px; }
.hero { min-height: 480px; display: grid; grid-template-columns: 1.15fr .65fr; gap: 60px; align-items: center; border-bottom: 1px solid var(--line); }
.eyebrow { margin: 0 0 12px; color: var(--orange-dark); font-size: .69rem; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 25px; font-family: Georgia, serif; font-size: clamp(4.2rem, 9vw, 8.2rem); font-weight: 400; letter-spacing: -.075em; line-height: .79; }
h1 em { color: var(--orange); font-weight: 400; }
.hero-copy { max-width: 570px; color: var(--muted); font-size: 1.03rem; line-height: 1.8; }
.unit-card { min-height: 270px; padding: 32px; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid rgba(255,101,11,.18); border-radius: 36px; color: white; background: linear-gradient(145deg, #09223d, #061426); box-shadow: 0 26px 70px rgba(7,27,50,.18); transform: rotate(2deg); }
.unit-card::before { content: ""; width: 54px; height: 54px; margin-bottom: auto; border: 10px solid var(--orange); border-left-color: transparent; border-radius: 50%; }
.unit-card span, .unit-card small { color: #9fb0c3; }
.unit-card strong { margin: 7px 0; font-size: clamp(2.3rem, 5vw, 4.2rem); letter-spacing: -.06em; }

.menu-section { padding: 90px 0; }
.box-offer { margin-bottom: 85px; padding: clamp(28px, 5vw, 52px); display: grid; grid-template-columns: 1fr auto; gap: 35px; align-items: center; overflow: hidden; border: 1px solid rgba(255,101,11,.18); border-radius: 34px; background: linear-gradient(135deg, #fff 0 65%, #fff0df 100%); box-shadow: 0 25px 70px rgba(62,39,16,.08); }
.box-offer h2 { margin: 0 0 12px; font-family: Georgia, serif; font-size: clamp(2.6rem, 6vw, 5.2rem); font-weight: 400; letter-spacing: -.06em; }
.box-offer p:not(.eyebrow) { margin-bottom: 15px; color: var(--muted); }
.box-price { min-width: 190px; padding: 28px; border-radius: 28px; color: white; background: var(--ink); text-align: center; transform: rotate(2deg); }
.box-price strong, .box-price small { display: block; }
.box-price strong { font-family: Georgia, serif; font-size: clamp(3.6rem, 7vw, 6rem); font-weight: 400; letter-spacing: -.07em; }
.box-price small { color: #b5c2d0; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.box-stock { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border-radius: 999px; font-size: .72rem; font-weight: 800; }
.box-stock::before { width: 7px; height: 7px; content: ""; border-radius: 50%; background: currentColor; }
.box-stock.is-available { color: var(--green); background: rgba(18,166,106,.08); }
.box-stock.is-unavailable { color: #a33c22; background: #fff0e8; }
.contents-heading { margin-bottom: 35px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 35px; }
.section-heading h2, .order-dialog h2 { margin: 0; font-family: Georgia, serif; font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 400; letter-spacing: -.05em; }
.section-heading > p { max-width: 270px; color: var(--muted); line-height: 1.6; }
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.product-card { position: relative; min-height: 270px; padding: 24px; overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 26px; background: rgba(255,255,255,.7); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.product-card:hover { transform: translateY(-5px); border-color: rgba(255,101,11,.35); box-shadow: 0 20px 42px rgba(38,30,20,.08); }
.product-card::after { position: absolute; right: -25px; top: -25px; width: 110px; height: 110px; content: ""; border-radius: 50%; background: var(--accent, #ffd7b7); opacity: .45; }
.product-category { position: relative; z-index: 1; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; color: var(--ink); background: var(--accent, #ffd7b7); font-weight: 900; }
.product-card h3 { margin: auto 0 8px; font-family: Georgia, serif; font-size: 1.65rem; font-weight: 400; }
.product-card p { min-height: 40px; margin-bottom: 20px; color: var(--muted); font-size: .83rem; line-height: 1.5; }
.product-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.product-price { font-size: 1.12rem; font-weight: 900; }
.add-button, .quantity-control { min-width: 95px; height: 39px; border: 0; border-radius: 12px; color: white; background: var(--ink); cursor: pointer; font-weight: 800; }
.add-button:hover { background: var(--orange); }
.quantity-control { display: grid; grid-template-columns: 32px 30px 32px; place-items: center; }
.quantity-control button { width: 100%; height: 100%; padding: 0; border: 0; color: white; background: transparent; cursor: pointer; font-size: 1.15rem; }
.quantity-control span { font-variant-numeric: tabular-nums; }
.stock-note { margin-top: 12px; color: #8a765e; font-size: .68rem; }
.content-card { min-height: 230px; }
.content-card .included-pill { position: absolute; z-index: 2; right: 20px; top: 20px; padding: 7px 9px; border-radius: 999px; color: #34503f; background: #e7f6ed; font-size: .65rem; font-weight: 850; }
.content-card h3 { margin-top: auto; }
.content-card p { min-height: 0; margin-bottom: 0; }
.loading-card { height: 270px; border-radius: 26px; background: linear-gradient(90deg, #f3e6d3 25%, #fff7ec 50%, #f3e6d3 75%); background-size: 200% 100%; animation: shimmer 1.25s infinite; }
.notice { padding: 16px 18px; margin-bottom: 20px; border: 1px solid rgba(217,75,25,.2); border-radius: 14px; color: #a43f1b; background: #fff0e8; }

.how-it-works { padding: 80px 0 25px; border-top: 1px solid var(--line); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 28px; border-top: 1px solid var(--line); }
.steps div { padding: 28px 30px 10px 0; border-right: 1px solid var(--line); }
.steps div:not(:first-child) { padding-left: 30px; }
.steps span { color: var(--orange); font-size: .7rem; }
.steps strong { display: block; margin: 25px 0 7px; font-family: Georgia, serif; font-size: 1.7rem; font-weight: 400; }
.steps p { color: var(--muted); }

.order-bar { position: fixed; z-index: 10; left: 50%; bottom: 20px; width: min(760px, calc(100% - 30px)); padding: 14px 14px 14px 22px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid rgba(255,255,255,.14); border-radius: 21px; color: white; background: rgba(7,27,50,.95); box-shadow: 0 22px 65px rgba(7,27,50,.25); backdrop-filter: blur(15px); animation: slide-up .3s ease both; }
.order-bar small, .order-bar strong { display: block; }
.order-bar small { color: #9fb0c3; font-size: .68rem; }
.order-bar button, .primary-button { padding: 14px 20px; border: 0; border-radius: 14px; color: white; background: var(--orange); cursor: pointer; font-weight: 850; }
.order-bar button:hover, .primary-button:hover { background: #ff7b31; }

.order-dialog { width: min(560px, calc(100% - 24px)); padding: 0; border: 0; border-radius: 28px; background: transparent; }
.order-dialog::backdrop { background: rgba(3,13,24,.68); backdrop-filter: blur(5px); }
.dialog-card { position: relative; max-height: min(760px, 90vh); overflow-y: auto; padding: clamp(26px, 6vw, 42px); border-radius: 28px; background: var(--paper); }
.close-button { position: absolute; right: 20px; top: 18px; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: white; cursor: pointer; font-size: 1.4rem; }
.order-items { margin-top: 28px; border-top: 1px solid var(--line); }
.order-item { padding: 15px 0; display: flex; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); }
.order-item small { display: block; margin-top: 4px; color: var(--muted); }
.total-row { padding: 22px 0; display: flex; justify-content: space-between; font-size: 1.1rem; }
.demo-note { padding: 13px; border-radius: 12px; color: #8a673d; background: var(--cream); font-size: .78rem; line-height: 1.5; }
.view-copy { margin: 8px 0 22px; color: var(--muted); font-size: .85rem; line-height: 1.6; }
.payment-options { display: grid; gap: 10px; margin-bottom: 18px; }
.payment-option { width: 100%; padding: 13px 14px; display: grid; grid-template-columns: 45px 1fr auto; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 16px; color: var(--ink); background: white; cursor: pointer; text-align: left; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.payment-option:hover { transform: translateY(-2px); border-color: rgba(255,101,11,.4); }
.payment-option.is-selected { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,101,11,.1); }
.payment-option > span:nth-child(2) { min-width: 0; }
.payment-option strong, .payment-option small { display: block; }
.payment-option strong { font-size: .9rem; }
.payment-option small { margin-top: 3px; color: var(--muted); font-size: .68rem; }
.payment-option i { color: #9ba7b4; font-style: normal; font-size: 1.4rem; }
.pay-icon { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 14px; color: white; font-size: .82rem; font-weight: 950; }
.pay-icon-g { background: linear-gradient(135deg, #4285f4 0 45%, #34a853 45% 70%, #fbbc04 70%); }
.pay-icon-p { background: #5f259f; }
.pay-icon-u { background: linear-gradient(135deg, #ef6c00, #159447); }
.pay-icon-c { background: #0b2b4d; }
.text-button { width: 100%; margin-top: 12px; padding: 10px; border: 0; color: var(--muted); background: transparent; cursor: pointer; font-weight: 750; }
.primary-button:disabled { opacity: .52; cursor: not-allowed; }
.pin-view { text-align: center; }
.demo-shield { width: 66px; margin: 0 auto 18px; padding: 7px; border: 1px solid rgba(255,101,11,.35); border-radius: 999px; color: var(--orange-dark); background: #fff0e5; font-size: .64rem; font-weight: 950; letter-spacing: .14em; }
.selected-payment-label { margin: 8px 0 18px; color: var(--muted); font-size: .78rem; }
.pin-dots { height: 38px; display: flex; justify-content: center; align-items: center; gap: 16px; }
.pin-dots span { width: 13px; height: 13px; border: 2px solid #9aa5b1; border-radius: 50%; background: transparent; transition: transform .16s ease, background .16s ease; }
.pin-dots span.is-filled { border-color: var(--orange); background: var(--orange); transform: scale(1.08); }
.pin-hint { margin: 8px 0 13px; color: #8a673d; font-size: .73rem; }
.pin-error { margin: 0 0 12px; color: #b63f23; font-size: .75rem; font-weight: 750; }
.pin-pad { width: min(300px, 100%); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.pin-pad button { min-height: 52px; border: 1px solid var(--line); border-radius: 15px; color: var(--ink); background: white; cursor: pointer; font-size: 1.12rem; font-weight: 850; box-shadow: 0 5px 12px rgba(7,27,50,.04); }
.pin-pad button:active { transform: scale(.96); background: var(--cream); }
.pin-pad button:disabled { opacity: .45; cursor: wait; }
.pin-pad .pin-action { color: var(--muted); font-size: .68rem; }
.pin-view.is-processing .pin-dots span { animation: pulse .7s infinite alternate; }
.primary-button, .secondary-button { width: 100%; }
.secondary-button { margin-top: 25px; padding: 13px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: white; cursor: pointer; font-weight: 800; }
.success-view { text-align: center; }
.success-icon { width: 62px; height: 62px; margin: 0 auto 22px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--green); font-size: 1.8rem; }
.success-view h2 { font-size: 3rem; }
.success-view > p { color: var(--muted); }
.collection-countdown { margin: 14px 0 0; color: var(--orange-dark) !important; font-size: 1rem; font-weight: 850; font-variant-numeric: tabular-nums; }
.order-progress { margin-top: 25px; padding: 14px; border-radius: 13px; color: #7a5b2c; background: var(--cream); }
.order-progress span { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--orange); animation: pulse 1s infinite; }
.order-progress.is-done { color: var(--green); background: rgba(18,166,106,.08); }
.order-progress.is-done span { background: var(--green); animation: none; }

footer { max-width: 1240px; margin: auto; padding: 30px 28px 45px; display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: .76rem; }
footer span { color: var(--ink); font-weight: 900; letter-spacing: .12em; }

@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes slide-up { from { opacity: 0; transform: translate(-50%, 15px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes pulse { 50% { opacity: .3; transform: scale(.7); } }

@media (max-width: 780px) {
    .site-header { height: 78px; padding: 0 18px; }
    .brand small { display: none; }
    main { padding: 5px 18px 115px; }
    .hero { min-height: 0; display: block; padding: 70px 0 65px; }
    h1 { font-size: clamp(4.2rem, 23vw, 7rem); }
    .unit-card { min-height: 215px; margin-top: 45px; transform: none; }
    .menu-section { padding: 65px 0; }
    .box-offer { margin-bottom: 65px; grid-template-columns: 1fr; }
    .box-price { min-width: 0; transform: none; }
    .section-heading { display: block; }
    .section-heading > p { margin-top: 15px; }
    .product-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .product-card { min-height: 245px; padding: 17px; }
    .product-card h3 { font-size: 1.35rem; }
    .steps { grid-template-columns: 1fr; }
    .steps div, .steps div:not(:first-child) { padding: 22px 0; border-right: 0; border-bottom: 1px solid var(--line); }
    .order-bar { bottom: 10px; padding: 11px 11px 11px 16px; }
    .order-bar button { padding: 12px 14px; font-size: .77rem; }
}

@media (max-width: 430px) {
    .device-status { max-width: 105px; overflow: hidden; white-space: nowrap; }
    .product-grid { grid-template-columns: 1fr; }
    .product-card { min-height: 225px; }
    .content-card { min-height: 205px; }
    footer { display: block; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
.seat-page{background:#fff7ea}.seat-order-main{width:min(700px,calc(100% - 32px));margin:0 auto;padding:24px 0 120px}.seat-hero{margin:38px 0 28px;padding:24px;border-radius:20px;background:#1b3931;color:#fff}.seat-hero h1{margin:5px 0;font-size:clamp(1.6rem,7vw,2.4rem)}.seat-hero p{margin:0;color:#dfe9df}.seat-page .product-card{display:flex;align-items:center;justify-content:space-between}.seat-page .product-card h3{margin:4px 0}.seat-page .product-card p{margin:5px 0 12px;color:#66706b}.seat-page .product-card button{width:42px;height:42px;border:0;border-radius:50%;background:#f0ad37;font-size:1.6rem;cursor:pointer}.seat-cart{position:sticky;bottom:12px;margin-top:24px;padding:20px;border-radius:18px;background:#fff;box-shadow:0 8px 30px #553e1c28}.seat-cart h2{margin:0 0 12px}.seat-cart p{display:flex;justify-content:space-between;gap:12px}.cart-total{display:flex;justify-content:space-between;border-top:1px solid #e7ded0;padding-top:14px;margin:14px 0}.seat-cart .primary-button{width:100%}.seat-pin{display:block;width:100%;box-sizing:border-box;margin:18px 0;padding:14px;border:1px solid #cfc6b6;border-radius:10px;font-size:1.3rem;letter-spacing:.5em}