:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--text); background: var(--bg); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.demo-site { --bg: #f4f1ea; --surface: #fff; --text: #171717; --muted: #696969; --line: rgba(23,23,23,.16); --accent: #171717; --accent-text: #fff; --hero-bg: #ebe6db; --heading: Georgia, "Times New Roman", serif; }
.theme-medical { --bg: #f3f8f8; --surface: #fff; --text: #123537; --muted: #547174; --line: rgba(18,53,55,.15); --accent: #087d83; --accent-text: #fff; --hero-bg: #dfeeee; --heading: Inter, ui-sans-serif, system-ui, sans-serif; }
.theme-auto { color-scheme: dark; --bg: #090b0f; --surface: #11151b; --text: #f4f5f7; --muted: #9ca4ad; --line: rgba(255,255,255,.16); --accent: #168cff; --accent-text: #fff; --hero-bg: #090b0f; --heading: Inter, ui-sans-serif, system-ui, sans-serif; }
.theme-restaurant { color-scheme: dark; --bg: #18120e; --surface: #241a14; --text: #f2e5d2; --muted: #bba991; --line: rgba(242,229,210,.18); --accent: #dc7a4b; --accent-text: #18120e; --hero-bg: #18120e; --heading: Georgia, "Times New Roman", serif; }
.theme-landing { --bg: #f4f6ff; --surface: #fff; --text: #10245e; --muted: #5c6a91; --line: rgba(16,36,94,.16); --accent: #b9ff36; --accent-text: #10245e; --hero-bg: #112a72; --heading: Inter, ui-sans-serif, system-ui, sans-serif; }
.demo-skip { position: fixed; z-index: 100; top: 10px; left: 10px; padding: .75rem 1rem; color: #000; background: #fff; transform: translateY(-150%); }
.demo-skip:focus { transform: translateY(0); }
.demo-ribbon { min-height: 38px; padding: .55rem clamp(1rem,4vw,4rem); display: flex; justify-content: space-between; gap: 1rem; color: var(--accent-text); background: var(--accent); font-size: .72rem; font-weight: 700; letter-spacing: .04em; }
.demo-ribbon a { text-decoration: underline; text-underline-offset: .2em; }
.theme-landing .demo-ribbon { color: #10245e; }
.demo-header { min-height: 86px; padding: 1rem clamp(1rem,4vw,4rem); display: grid; grid-template-columns: minmax(170px,1fr) auto minmax(170px,1fr); align-items: center; gap: 2rem; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 94%, transparent); }
.demo-brand { display: inline-flex; flex-direction: column; justify-self: start; }
.demo-brand strong { font-family: var(--heading); font-size: 1.35rem; letter-spacing: -.03em; }
.demo-brand span { margin-top: .2rem; color: var(--muted); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.demo-header nav { display: flex; gap: clamp(1rem,3vw,2.7rem); color: var(--muted); font-size: .82rem; }
.demo-header nav a:hover { color: var(--text); }
.demo-tools { display: flex; align-items: center; justify-self: end; gap: 1rem; }
.demo-lang { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-size: .68rem; font-weight: 800; }
.demo-header-cta, .demo-button { min-height: 48px; padding: .85rem 1.2rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--accent); font-size: .78rem; font-weight: 800; transition: transform .2s ease, background .2s ease; }
.demo-header-cta, .demo-button.primary { color: var(--accent-text); background: var(--accent); }
.theme-landing .demo-header-cta, .theme-landing .demo-button.primary { color: #10245e; }
.demo-header-cta:hover, .demo-button:hover { transform: translateY(-2px); }
.demo-button.secondary { border-color: var(--line); background: transparent; }
.demo-hero { min-height: calc(100svh - 124px); display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); background: var(--hero-bg); }
.demo-hero-copy { padding: clamp(4rem,9vw,9rem) clamp(1.25rem,6vw,7rem); display: flex; flex-direction: column; justify-content: center; }
.demo-kicker, .demo-label { margin: 0 0 1.5rem; color: var(--muted); font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.demo-hero h1, .demo-intro h2, .demo-proof h2, .demo-contact h2 { margin: 0; font-family: var(--heading); font-size: clamp(3rem,6.4vw,7rem); font-weight: 500; letter-spacing: -.055em; line-height: .94; }
.theme-auto .demo-hero h1, .theme-landing .demo-hero h1 { font-weight: 760; line-height: .9; }
.demo-hero-copy > p:not(.demo-kicker) { max-width: 620px; margin: 2rem 0 0; color: var(--muted); font-size: 1.05rem; line-height: 1.75; }
.demo-actions { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: .8rem; }
.demo-hero-media { min-width: 0; min-height: 620px; margin: 0; overflow: hidden; }
.demo-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.theme-professional .demo-hero-media img { object-position: 68% center; }
.theme-medical .demo-hero-media img { object-position: center; }
.theme-auto .demo-hero-media img { object-position: center; }
.theme-landing .demo-hero-media { order: -1; }
.theme-landing .demo-hero-copy { color: white; }
.theme-landing .demo-hero-copy > p:not(.demo-kicker), .theme-landing .demo-kicker { color: #c8d4ff; }
.theme-landing .demo-button.secondary { color: white; border-color: rgba(255,255,255,.35); }
.demo-intro { padding: clamp(5rem,10vw,10rem) clamp(1.25rem,6vw,7rem); display: grid; grid-template-columns: minmax(0,1.2fr) minmax(280px,.8fr); gap: clamp(3rem,9vw,10rem); align-items: end; }
.demo-intro h2, .demo-proof h2, .demo-contact h2 { font-size: clamp(2.8rem,5vw,5.8rem); }
.demo-intro > p, .demo-proof > div > p, .demo-contact > div > p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.8; }
.demo-cards { margin: 0 clamp(1.25rem,6vw,7rem); display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.demo-cards article { min-height: 290px; padding: clamp(1.5rem,3vw,2.8rem); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.demo-cards article > span { color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .14em; }
.demo-cards h3 { margin: 5rem 0 1rem; font-family: var(--heading); font-size: clamp(1.8rem,3vw,3rem); font-weight: 500; letter-spacing: -.04em; }
.demo-cards p { margin: 0; color: var(--muted); line-height: 1.7; }
.theme-auto .demo-cards article { background: linear-gradient(145deg,#11151b,#090b0f); }
.theme-restaurant .demo-cards article { background: #241a14; }
.theme-landing .demo-cards article:first-child { color: white; background: #112a72; }
.theme-landing .demo-cards article:first-child p, .theme-landing .demo-cards article:first-child span { color: #c8d4ff; }
.demo-proof { margin-top: clamp(6rem,12vw,12rem); padding: clamp(5rem,9vw,9rem) clamp(1.25rem,6vw,7rem); display: grid; grid-template-columns: minmax(180px,.35fr) minmax(0,1.65fr); gap: clamp(3rem,8vw,9rem); color: var(--accent-text); background: var(--accent); }
.theme-landing .demo-proof { color: #10245e; }
.demo-proof .demo-label, .demo-proof > div > p { color: color-mix(in srgb, var(--accent-text) 72%, transparent); }
.theme-landing .demo-proof .demo-label, .theme-landing .demo-proof > div > p { color: #304278; }
.demo-proof > div > p { max-width: 760px; margin-top: 1.8rem; }
.demo-contact { padding: clamp(5rem,10vw,10rem) clamp(1.25rem,6vw,7rem); display: flex; align-items: end; justify-content: space-between; gap: 4rem; }
.demo-contact > div { max-width: 900px; }
.demo-contact > div > p { max-width: 700px; margin-top: 1.8rem; }
.demo-contact > .demo-button { flex: 0 0 auto; }
.demo-footer { min-height: 150px; padding: 2rem clamp(1.25rem,6vw,7rem); display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center; gap: 2rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .72rem; }
.demo-footer > div { display: flex; flex-direction: column; }
.demo-footer strong { color: var(--text); font-family: var(--heading); font-size: 1.1rem; }
.demo-footer p { text-align: center; line-height: 1.6; }
.demo-footer > a { justify-self: end; color: var(--text); text-decoration: underline; text-underline-offset: .2em; }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

@media (max-width: 980px) {
  .demo-header { grid-template-columns: 1fr auto; }
  .demo-header nav { display: none; }
  .demo-hero { grid-template-columns: 1fr; }
  .demo-hero-media { min-height: 520px; order: -1; }
  .demo-intro { grid-template-columns: 1fr; }
  .demo-proof { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .demo-ribbon { font-size: .62rem; }
  .demo-header { min-height: 76px; gap: .8rem; }
  .demo-header-cta { display: none; }
  .demo-brand strong { font-size: 1.1rem; }
  .demo-hero { min-height: auto; }
  .demo-hero-media { min-height: 0; aspect-ratio: 4/3; }
  .demo-hero-copy { padding-top: 4.5rem; padding-bottom: 5rem; }
  .demo-hero h1 { font-size: clamp(3rem,14vw,4.8rem); }
  .demo-actions { flex-direction: column; align-items: stretch; }
  .demo-cards { grid-template-columns: 1fr; }
  .demo-cards article { min-height: 230px; }
  .demo-cards h3 { margin-top: 3.2rem; }
  .demo-contact { align-items: stretch; flex-direction: column; }
  .demo-footer { grid-template-columns: 1fr; }
  .demo-footer p { text-align: left; }
  .demo-footer > a { justify-self: start; }
}

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