:root {
    --demo-bg: #f7f4ed;
    --demo-surface: #fffdf8;
    --demo-ink: #18201e;
    --demo-muted: #68716d;
    --demo-accent: #a66e32;
    --demo-accent-2: #d7ad68;
    --demo-dark: #17211f;
    --demo-border: rgba(24, 32, 30, .14);
    --demo-radius: 24px;
    --demo-font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body[data-demo-theme="restaurant"] {
    --demo-bg: #f8f1e7;
    --demo-surface: #fffaf2;
    --demo-ink: #30271f;
    --demo-muted: #786b60;
    --demo-accent: #b24f35;
    --demo-accent-2: #d6a054;
    --demo-dark: #3b3d28;
}

body[data-demo-theme="service"] {
    --demo-bg: #edf3f4;
    --demo-surface: #fbfefe;
    --demo-ink: #162e35;
    --demo-muted: #65777b;
    --demo-accent: #176d7b;
    --demo-accent-2: #ee9f44;
    --demo-dark: #12343b;
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; background: var(--demo-bg); color: var(--demo-ink); font-family: var(--demo-font); line-height: 1.6; -webkit-font-smoothing: antialiased; }
.demo-container { width: min(1180px, calc(100% - 32px)); margin-inline: auto; }
.demo-notice { min-height: 38px; padding: 8px max(16px, calc((100% - 1180px) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--demo-dark); color: rgba(255,255,255,.78); font-size: .7rem; font-weight: 700; letter-spacing: .04em; }
.demo-notice a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.demo-header { position: sticky; top: 0; z-index: 100; height: 76px; background: color-mix(in srgb, var(--demo-bg) 90%, transparent); border-bottom: 1px solid var(--demo-border); backdrop-filter: blur(14px); }
.demo-header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.demo-brand { display: flex; align-items: center; gap: 11px; letter-spacing: -.025em; }
.demo-brand > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--demo-dark); color: var(--demo-accent-2); font-size: .7rem; font-weight: 900; }
.demo-brand strong { font-size: 1rem; }
.demo-header nav { display: flex; align-items: center; gap: 30px; color: var(--demo-muted); font-size: .82rem; font-weight: 650; }
.demo-header nav a:hover { color: var(--demo-accent); }
.demo-button { min-height: 50px; padding: 13px 21px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid var(--demo-accent); border-radius: 50px; background: var(--demo-accent); color: #fff; font-size: .84rem; font-weight: 800; line-height: 1.2; transition: transform .2s, box-shadow .2s, background .2s; }
.demo-button:hover { transform: translateY(-2px); box-shadow: 0 12px 28px color-mix(in srgb, var(--demo-accent) 25%, transparent); }
.demo-button-small { min-height: 42px; padding: 10px 17px; }
.demo-hero { min-height: calc(100vh - 114px); padding: 74px 0 86px; display: flex; align-items: center; }
.demo-hero-grid { display: grid; grid-template-columns: 1fr .92fr; gap: clamp(45px, 8vw, 110px); align-items: center; }
.demo-eyebrow, .demo-heading > span { display: inline-block; margin-bottom: 18px; color: var(--demo-accent); font-size: .7rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.demo-hero h1 { max-width: 680px; font-size: clamp(3.4rem, 7vw, 6.6rem); line-height: .91; letter-spacing: -.07em; }
.demo-hero-copy > p { max-width: 620px; margin-top: 26px; color: var(--demo-muted); font-size: clamp(1rem, 1.5vw, 1.15rem); }
.demo-actions { margin-top: 32px; display: flex; align-items: center; flex-wrap: wrap; gap: 20px; }
.demo-link { padding-bottom: 3px; border-bottom: 1px solid var(--demo-border); color: var(--demo-ink); font-size: .83rem; font-weight: 800; }
.demo-hero-copy > ul { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--demo-muted); font-size: .72rem; font-weight: 700; }
.demo-hero-copy > ul li::before { content: "✓"; margin-right: 6px; color: var(--demo-accent); }
.demo-hero-visual { position: relative; min-height: 500px; display: grid; place-items: center; }
.demo-visual-orbit { position: absolute; width: min(470px, 93%); aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--demo-accent) 25%, transparent); border-radius: 50%; }
.demo-visual-orbit::before, .demo-visual-orbit::after { content: ""; position: absolute; border: 1px solid color-mix(in srgb, var(--demo-accent) 14%, transparent); border-radius: 50%; }
.demo-visual-orbit::before { inset: 12%; }.demo-visual-orbit::after { inset: 26%; }
.demo-visual-card { position: relative; z-index: 2; width: min(360px, 77%); min-height: 390px; padding: 45px 36px; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid rgba(255,255,255,.17); border-radius: 180px 180px 28px 28px; background: var(--demo-dark); color: #fff; box-shadow: 0 35px 80px color-mix(in srgb, var(--demo-dark) 25%, transparent); transform: rotate(2deg); }
body[data-demo-theme="restaurant"] .demo-visual-card { border-radius: 50% 50% 28px 28px; transform: rotate(-2deg); }
body[data-demo-theme="service"] .demo-visual-card { border-radius: 32px; transform: rotate(2deg); }
.demo-visual-card > span { color: var(--demo-accent-2); font-size: .65rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.demo-visual-card strong { margin-top: 10px; font-size: 2.2rem; line-height: 1.05; letter-spacing: -.05em; }
.demo-visual-card i { width: 80%; height: 3px; margin-top: 18px; display: block; border-radius: 4px; background: rgba(255,255,255,.18); }
.demo-visual-card i + i { width: 58%; margin-top: 8px; }
.demo-visual-card button { width: max-content; margin-top: 24px; padding: 10px 15px; border-radius: 30px; background: var(--demo-accent); color: #fff; font-size: .68rem; font-weight: 800; }
.demo-visual-stamp { position: absolute; z-index: 3; right: 3%; bottom: 12%; width: 98px; height: 98px; display: grid; place-items: center; border-radius: 50%; background: var(--demo-accent-2); color: var(--demo-dark); font-size: 1.2rem; font-weight: 950; box-shadow: 0 18px 40px rgba(0,0,0,.16); transform: rotate(-9deg); }
.demo-section { padding: 100px 0; scroll-margin-top: 76px; }
.demo-heading { max-width: 710px; margin-bottom: 48px; }
.demo-heading h2, .demo-about h2, .demo-contact h2 { font-size: clamp(2.35rem, 5vw, 4.4rem); line-height: 1; letter-spacing: -.055em; }
.demo-heading p { margin-top: 17px; color: var(--demo-muted); }
.demo-services { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.demo-services article { min-height: 280px; padding: 26px; display: flex; flex-direction: column; border: 1px solid var(--demo-border); border-radius: var(--demo-radius); background: var(--demo-surface); transition: transform .25s, box-shadow .25s; }
.demo-services article:hover { transform: translateY(-5px); box-shadow: 0 20px 45px rgba(20,35,31,.08); }
.demo-services article > span { color: var(--demo-accent); font-size: .65rem; font-weight: 900; }
.demo-services h3 { margin-top: 45px; font-size: 1.05rem; }
.demo-services p { margin-top: 10px; color: var(--demo-muted); font-size: .82rem; }
.demo-services a { margin-top: auto; padding-top: 20px; color: var(--demo-accent); font-size: .75rem; font-weight: 850; }
.demo-band { padding: 58px 0; overflow: hidden; background: var(--demo-dark); color: #fff; }
.demo-band .demo-container { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.demo-band p { max-width: 920px; font-size: clamp(1.8rem, 4vw, 3.3rem); line-height: 1.05; letter-spacing: -.045em; }
.demo-band span { width: 88px; height: 88px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; color: var(--demo-accent-2); font-weight: 900; }
.demo-about { background: var(--demo-surface); }
.demo-about-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(50px, 9vw, 125px); align-items: center; }
.demo-about-art { position: relative; min-height: 520px; overflow: hidden; border-radius: var(--demo-radius); background: var(--demo-dark); }
.demo-about-art span { position: absolute; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; }
.demo-about-art span:first-child { width: 410px; height: 410px; top: -120px; left: -150px; }
.demo-about-art span:nth-child(2) { width: 300px; height: 300px; right: -90px; bottom: -60px; background: color-mix(in srgb, var(--demo-accent) 60%, transparent); border: 0; }
.demo-about-art strong { position: absolute; left: 40px; bottom: 35px; color: var(--demo-accent-2); font-size: 6rem; line-height: 1; letter-spacing: -.08em; }
.demo-about-grid > div:last-child > p { margin-top: 23px; color: var(--demo-muted); font-size: 1rem; }
.demo-about-grid ul { margin-top: 30px; display: grid; gap: 12px; }
.demo-about-grid li { padding-bottom: 12px; border-bottom: 1px solid var(--demo-border); font-size: .86rem; font-weight: 750; }
.demo-about-grid li::before { content: "✓"; margin-right: 9px; color: var(--demo-accent); }
.demo-gallery-section { background: var(--demo-bg); }
.demo-heading-row { max-width: none; display: grid; grid-template-columns: 1fr .55fr; gap: 80px; align-items: end; }
.demo-heading-row > p { margin: 0; }
.demo-gallery { display: grid; grid-template-columns: 1.15fr .85fr; grid-template-rows: repeat(2, 250px); gap: 14px; }
.demo-gallery-item { overflow: hidden; border-radius: var(--demo-radius); background: var(--demo-dark); }
.demo-gallery-item:first-child { grid-row: span 2; }
.demo-gallery-item > div { height: calc(100% - 43px); padding: 24px; display: flex; align-items: flex-end; position: relative; overflow: hidden; background: linear-gradient(145deg, color-mix(in srgb, var(--demo-accent) 78%, var(--demo-dark)), var(--demo-dark)); }
.demo-gallery-item > div::before, .demo-gallery-item > div::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.08); }
.demo-gallery-item > div::before { width: 260px; height: 260px; right: -60px; top: -80px; }.demo-gallery-item > div::after { width: 100px; height: 100px; left: 25px; top: 30px; border: 1px solid rgba(255,255,255,.15); background: none; }
.demo-gallery-item span { position: relative; z-index: 2; color: #fff; font-size: clamp(1.5rem, 3vw, 2.8rem); font-weight: 850; letter-spacing: -.04em; }
.demo-gallery-item figcaption { height: 43px; padding: 11px 15px; background: var(--demo-surface); color: var(--demo-muted); font-size: .65rem; }
.demo-contact { background: var(--demo-dark); color: #fff; }
.demo-contact-grid { display: grid; grid-template-columns: 1fr .8fr; gap: clamp(50px, 10vw, 130px); align-items: center; }
.demo-contact-grid > div:first-child > p { max-width: 620px; margin: 22px 0 30px; color: rgba(255,255,255,.66); }
.demo-contact-card { padding: 32px; border: 1px solid rgba(255,255,255,.13); border-radius: var(--demo-radius); background: rgba(255,255,255,.045); }
.demo-contact-card > div { padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.demo-contact-card > div:first-child { padding-top: 0; }
.demo-contact-card span { display: block; margin-bottom: 10px; color: var(--demo-accent-2); font-size: .67rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.demo-contact-card p { color: rgba(255,255,255,.75); font-size: .82rem; }
.demo-contact-card small { display: block; margin-top: 20px; color: rgba(255,255,255,.42); font-size: .64rem; }
.demo-footer { padding: 35px 0; background: #0d1614; color: rgba(255,255,255,.55); }
.demo-footer .demo-container { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.demo-footer strong, .demo-footer span { display: block; }.demo-footer strong { color: #fff; font-size: .85rem; }.demo-footer span, .demo-footer p { font-size: .68rem; }.demo-footer a { color: #fff; }
.demo-whatsapp { position: fixed; z-index: 90; right: 20px; bottom: 20px; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: #1da769; color: #fff; font-size: 1.35rem; font-weight: 800; box-shadow: 0 14px 35px rgba(10,80,49,.25); }
:focus-visible { outline: 3px solid var(--demo-accent-2); outline-offset: 3px; }

@media (max-width: 980px) {
    .demo-header nav { display: none; }
    .demo-hero-grid { gap: 30px; }
    .demo-services { grid-template-columns: repeat(2, 1fr); }
    .demo-about-grid { gap: 55px; }
}

@media (max-width: 760px) {
    .demo-notice { align-items: flex-start; flex-direction: column; gap: 2px; }
    .demo-header { height: 68px; }
    .demo-header .demo-button { display: none; }
    .demo-hero { min-height: auto; padding: 60px 0 70px; }
    .demo-hero-grid, .demo-about-grid, .demo-contact-grid { grid-template-columns: 1fr; }
    .demo-hero-copy { text-align: center; }
    .demo-hero-copy > p { margin-inline: auto; }
    .demo-actions, .demo-hero-copy > ul { justify-content: center; }
    .demo-hero-visual { min-height: 430px; }
    .demo-visual-card { min-height: 350px; }
    .demo-section { padding: 75px 0; }
    .demo-about-art { min-height: 390px; order: 2; }
    .demo-heading-row { grid-template-columns: 1fr; gap: 0; }
    .demo-heading-row > p { margin-top: 17px; }
    .demo-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 360px 230px; }
    .demo-gallery-item:first-child { grid-column: 1 / -1; grid-row: auto; }
    .demo-band .demo-container { grid-template-columns: 1fr; }
    .demo-band span { display: none; }
}

@media (max-width: 520px) {
    .demo-container { width: min(1180px, calc(100% - 28px)); }
    .demo-notice { padding-inline: 14px; font-size: .62rem; }
    .demo-brand > span { width: 34px; height: 34px; }.demo-brand strong { font-size: .9rem; }
    .demo-hero h1 { font-size: clamp(3rem, 15vw, 4.5rem); }
    .demo-actions { align-items: stretch; flex-direction: column; }.demo-actions .demo-button { width: 100%; }.demo-link { width: max-content; margin-inline: auto; }
    .demo-hero-copy > ul { display: grid; grid-template-columns: 1fr; }
    .demo-hero-visual { min-height: 370px; }
    .demo-visual-card { width: 82%; min-height: 310px; padding: 35px 27px; }.demo-visual-card strong { font-size: 1.8rem; }.demo-visual-stamp { width: 76px; height: 76px; }
    .demo-heading h2, .demo-about h2, .demo-contact h2 { font-size: 2.45rem; }
    .demo-services { grid-template-columns: 1fr; }.demo-services article { min-height: 235px; }.demo-services h3 { margin-top: 32px; }
    .demo-band { padding: 44px 0; }.demo-band p { font-size: 1.75rem; }
    .demo-about-art { min-height: 320px; }.demo-about-art strong { left: 27px; bottom: 25px; font-size: 4.5rem; }
    .demo-gallery { display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(3, 280px); }.demo-gallery-item:first-child { grid-column: auto; }.demo-gallery-item { min-width: 0; }
    .demo-contact-grid .demo-button { width: 100%; }.demo-contact-card { padding: 24px; }
    .demo-footer .demo-container { align-items: flex-start; flex-direction: column; }
    .demo-whatsapp { right: 14px; bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; }
}