:root { color-scheme: light; font-family: "Avenir Next", "Segoe UI", Arial, sans-serif; color: #142c42; background: #fffaf1; }
* { box-sizing: border-box; }
body { margin: 0; }
.page { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; position: relative; overflow: hidden; background: radial-gradient(ellipse at 50% 45%, #fffdf9 5%, #fffaf1 65%); }
.page::before, .page::after { content: ""; position: absolute; width: 500px; height: 500px; border: 1px solid #efddc3; border-radius: 50%; pointer-events: none; }
.page::before { top: 26%; left: -400px; box-shadow: 0 0 0 35px #fff5e5, 0 0 0 36px #f1e2cc; }
.page::after { bottom: -325px; right: -240px; box-shadow: 0 0 0 35px #fff5e5, 0 0 0 36px #f1e2cc; }
.header { position: relative; z-index: 1; width: min(1320px, 100%); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 30px 50px 12px; gap: 24px; }
.logo { width: 205px; height: auto; display: block; }
.status { display: inline-flex; align-items: center; gap: 9px; border: 1px solid #eadfce; padding: 10px 15px; border-radius: 30px; font-size: 12px; font-weight: 600; color: #655b4f; white-space: nowrap; background: #fffdf7; }
.status span { height: 7px; width: 7px; border-radius: 50%; background: #ed8a28; box-shadow: 0 0 0 4px #fff0dc; margin-right: 3px; }
main { flex: 1; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px 24px 48px; text-align: center; }
.illustration { position: relative; width: 265px; margin-bottom: 20px; }
.illustration svg { width: 100%; height: auto; display: block; }
.sticker { position: absolute; right: -27px; bottom: 28px; padding: 9px 16px; border: 1px solid #e0ae34; border-radius: 5px; background: #ffcf59; color: #563919; font-size: 13px; font-weight: 700; box-shadow: 3px 4px 0 #513e1512; transform: rotate(-9deg); }
.eyebrow { font-size: 10px; letter-spacing: 2.5px; font-weight: 650; color: #9a7350; margin: 0 0 18px; }
h1 { font-size: clamp(42px, 5.2vw, 70px); font-weight: 750; line-height: 1.12; letter-spacing: -2.8px; margin: 0; }
h1 span { color: #ec6029; }
.description { color: #746a5e; font-size: 16px; line-height: 1.85; margin: 24px 0 0; }
.description strong { font-weight: 650; color: #374452; }
.coming-soon { margin-top: 27px; display: inline-flex; align-items: center; gap: 12px; padding: 12px 0 11px; border-bottom: 1px solid #e5c7a7; color: #9b4a27; font-size: 14px; font-weight: 650; }
.spark { color: #e67c37; font-size: 22px; line-height: 1; }
footer { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 20px; width: min(1220px, calc(100% - 100px)); margin: 0 auto; padding: 23px 0 26px; border-top: 1px solid #eadfce; }
footer > span { font-size: 14px; font-weight: 700; }
.footer-dot { color: #ed6029; }
footer p { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; color: #8c7e6d; }
footer svg { width: 15px; height: 15px; fill: none; stroke: #d87c4a; stroke-width: 1.5; }
.steam { animation: steam 3.5s ease-in-out infinite; transform-origin: center; }
@keyframes steam { 0%, 100% { opacity: .45; transform: translateY(3px); } 50% { opacity: 1; transform: translateY(-3px); } }
@media (min-width: 800px) and (max-height: 850px) { .header { padding-top: 20px; } .logo { width: 175px; } main { padding-top: 8px; padding-bottom: 26px; } .illustration { width: 205px; margin-bottom: 10px; } h1 { font-size: 56px; } .description { margin-top: 18px; } .coming-soon { margin-top: 18px; } }
@media (max-width: 600px) {
  .header { padding: 24px 24px 12px; gap: 12px; }
  .logo { width: 156px; }
  .status { padding: 8px 10px; font-size: 10px; gap: 5px; }
  .status span { width: 6px; height: 6px; box-shadow: 0 0 0 3px #fff0dc; }
  main { padding: 35px 22px 45px; }
  .illustration { width: 220px; margin-bottom: 25px; }
  .sticker { right: -13px; font-size: 11px; padding: 8px 12px; }
  .eyebrow { font-size: 8px; letter-spacing: 1.7px; margin-bottom: 17px; }
  h1 { font-size: clamp(39px, 10.5vw, 58px); letter-spacing: -1.7px; }
  .description { font-size: 14px; line-height: 1.8; max-width: 330px; margin-top: 22px; }
  .coming-soon { font-size: 13px; margin-top: 21px; }
  footer { width: calc(100% - 48px); padding: 19px 0 22px; }
  footer > span { font-size: 12px; }
  footer p { font-size: 10px; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) { .steam { animation: none; } }