:root { color-scheme: dark; font-family: "Trebuchet MS", Arial, sans-serif; }
* { box-sizing: border-box; }
html { min-height: 100%; background: #20192e; }
body { margin: 0; min-height: 100svh; display: grid; place-items: center; padding: 48px 24px; isolation: isolate; }
body::before { content: ""; position: fixed; inset: -18px; z-index: -2; background: url("assets/salon.webp") center / cover no-repeat; filter: blur(7px); }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(20 15 33 / 58%), rgb(24 15 39 / 48%) 50%, rgb(16 12 26 / 72%)); }
main { width: min(100%, 760px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; }
.intro { margin: 0; color: #fff9f0; font-size: clamp(18px, 2.4vw, 26px); font-weight: 400; line-height: 1.5; text-shadow: 0 2px 12px #0008; }
.brand { display: block; width: min(100%, 650px); border-radius: 24px; transition: transform 180ms ease; }
.brand img { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 30px #0006); }
.brand:hover { transform: translateY(-4px); }
.visit { display: inline-block; color: #fff; text-decoration: none; font-size: clamp(23px, 3vw, 30px); font-weight: 700; line-height: 1.5; text-shadow: 0 2px 10px #0008; transition: color 180ms ease; }
.visit:hover { color: #ffe16b; }
a:focus-visible { outline: 3px solid #ffe16b; outline-offset: 10px; }
@media (max-width: 480px) { body { padding: 32px 22px; } main { gap: 26px; } }
@media (prefers-reduced-motion: reduce) { .brand, .visit { transition: none; } }