/* Focus Hotel — landing
   Source of truth: Claude Design "Focus Hotel Site.dc.html".
   Two visual layers: the world is pixel art (nearest-neighbour, never smoothed),
   the interface is contemporary (Instrument Sans). Silkscreen only for chips,
   the timer and the wordmark. */

@font-face { font-family: "Instrument Sans"; src: url("assets/fonts/InstrumentSans-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("assets/fonts/InstrumentSans-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("assets/fonts/InstrumentSans-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("assets/fonts/InstrumentSans-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Silkscreen"; src: url("assets/fonts/Silkscreen-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Silkscreen"; src: url("assets/fonts/Silkscreen-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --paper: #FFFEFA;
  --cream: #FAF6EE;
  --band: #EDEAE0;
  --band-deep: #F2EFE6;
  --sand: #E2D3B9;
  --line: #DEDACE;
  --wood: #6C4F34;
  --wood-shadow: #CAAC87;
  --ink: #1F1913;
  --muted: #6B6052;
  --muted-2: #7A6E5E;
  --cta: #E0552F;
  --cta-shadow: #B34222;
  --cta-text: #FFF7EA;
  --gold: #F5B227;
  --gold-deep: #D18F14;
  --gold-text: #8A6A2E;
  --gold-surface: #FFF4D8;
  --gold-line: #F2D488;
  --earned: #3E9E5E;
  --earned-text: #2E7A48;
  --earned-surface: #E4F4E6;
  --rare: #8A5A86;
  --night: #2C2A45;
  --night-deep: #1A1830;
  --night-line: #1B1930;
  --night-ink: #EDEAFB;
  --night-muted: #A9A2D8;
  --night-muted-2: #7E77AE;
  --indigo: #8E86E8;
  --indigo-line: #6E66C4;
  --indigo-chip: #BDB6FF;
  --indigo-track: #3A3760;
  --footer: #1F1913;
  --footer-text: #B0A18B;
  --footer-muted: #7E7A6C;

  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pixel: "Silkscreen", monospace;
  --measure: 1180px;
  --gutter: 24px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; }
.px { image-rendering: pixelated; image-rendering: crisp-edges; }

a { color: var(--cta-shadow); text-decoration: none; }
a:hover { color: var(--cta); }

h1, h2, p { margin: 0; }

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

[id] { scroll-margin-top: 72px; }

/* ---------- type ---------- */

.pixel { font-family: var(--pixel); }

.eyebrow {
  font-family: var(--pixel);
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--muted-2);
  margin-bottom: 16px;
}

.h-hero {
  font-size: clamp(46px, 8.5vw, 78px);
  line-height: .94;
  font-weight: 700;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.h-section {
  font-size: clamp(34px, 5.4vw, 50px);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.036em;
  text-wrap: balance;
}

.h-section--tight { font-size: clamp(32px, 5vw, 46px); line-height: 1.04; letter-spacing: -0.035em; }

.lede {
  margin-top: 20px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 420px;
}

.lede--hero { margin-top: 24px; font-size: 19px; max-width: 430px; }

/* ---------- nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(250, 246, 238, .94);
  border-bottom: 2px solid var(--line);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 14px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--ink);
}

.brand__icon { width: 34px; height: 34px; border: 2px solid var(--wood); display: block; }

.brand__name {
  font-family: var(--pixel);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 1px;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 15px;
  font-weight: 500;
}

.nav__links a { color: var(--muted); }
.nav__links a:hover { color: var(--ink); }

.btn-cta {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 14px;
  color: var(--cta-text) !important;
  background: var(--cta);
  box-shadow: 0 3px 0 var(--cta-shadow);
  padding: 11px 17px;
  line-height: 1.2;
}

.btn-cta:hover { background: #E8663F; color: var(--cta-text); }
.btn-cta:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--cta-shadow); }

@media (max-width: 640px) {
  .nav__links a:not(.btn-cta) { display: none; }
}

/* ---------- store badges ---------- */

.badges {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 18px;
  margin-top: 32px;
}

.badge { display: flex; flex-direction: column; gap: 7px; }
.badge img { display: block; height: 66px; width: auto; image-rendering: auto; }
.badge--soon img { opacity: .5; }

.badge__note {
  font-family: var(--pixel);
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--muted);
  text-align: center;
}

.badge__note--hidden { visibility: hidden; }

.badges--large img { height: 70px; }

/* ---------- hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(#A6D4F5 0%, #CBE8F0 34%, #F7EEDF 74%, #FAF1E2 100%);
  border-bottom: 3px solid var(--wood);
}

.hero__inner {
  position: relative;
  z-index: 1;
  padding-top: 72px;
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: center;
}

.hero__copy { flex: 1 1 420px; min-width: 0; padding-bottom: 72px; }

.hero__art { flex: 1 1 520px; min-width: 0; position: relative; align-self: flex-end; }

.live-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--paper);
  border: 2px solid var(--line);
  padding: 7px 12px;
  margin-bottom: 24px;
}

.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot--earned { background: var(--earned); }
.dot--indigo { background: var(--indigo); }

.live-chip__text {
  font-family: var(--pixel);
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--earned-text);
}

.frame {
  position: relative;
  border: 3px solid var(--wood);
  box-shadow: 0 10px 0 var(--wood-shadow);
  background: #F6E4C3;
  overflow: hidden;
}

.frame img { display: block; width: 100%; height: auto; }

.caption {
  position: absolute;
  left: 18px;
  bottom: -30px;
  font-family: var(--pixel);
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--muted-2);
}

@media (max-width: 900px) {
  .hero__art { padding-bottom: 40px; }
  .caption { bottom: 8px; }
}

/* sky */

.sky { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

.cloud {
  position: absolute;
  left: 0;
  width: 128px;
  height: 52px;
  animation: fhCloud 90s linear infinite;
}

.cloud--lg { width: 160px; height: 65px; }
.cloud--md { width: 150px; height: 61px; }

.star { position: absolute; width: 13px; height: 13px; animation: fhTwinkle 6s ease-in-out infinite; }
.star--lg { width: 18px; height: 18px; }

.moon { position: absolute; left: 79%; top: 12%; width: 46px; height: 52px; }

.moon-glow {
  position: absolute;
  left: 79%;
  top: 12%;
  width: 46px;
  height: 52px;
  margin: -42px 0 0 -42px;
  padding: 42px;
  box-sizing: content-box;
  background: radial-gradient(circle, rgba(245, 222, 160, .20), rgba(245, 222, 160, 0) 68%);
  animation: fhGlow 12s ease-in-out infinite;
}

.shooting-star {
  position: absolute;
  left: 42%;
  top: 9%;
  width: 72px;
  height: 56px;
  opacity: 0;
  animation: fhShoot 26s linear infinite;
}

/* ---------- pillars ---------- */

.pillars { background: var(--band); border-bottom: 2px solid var(--line); }

.pillars__inner {
  padding-block: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}

.pillar { flex: 1 1 240px; min-width: 0; border-left: 3px solid; padding-left: 16px; }
.pillar--focus { border-color: var(--cta); }
.pillar--earn { border-color: var(--gold); }
.pillar--together { border-color: var(--earned); }

.pillar__title {
  font-family: var(--pixel);
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--ink);
  margin-bottom: 8px;
}

.pillar__text { font-size: 16px; line-height: 1.5; color: var(--muted); }

/* ---------- sections ---------- */

.section__inner {
  padding-block: 88px;
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: center;
}

.section__inner--roomy { padding-block: 96px; gap: 56px; }

.col-copy { flex: 1 1 380px; min-width: 0; }
.col-art { flex: 1 1 460px; min-width: 0; }
.col-art--wide { flex-basis: 520px; }

@media (max-width: 640px) {
  .section__inner, .section__inner--roomy { padding-block: 64px; gap: 40px; }
}

/* ---------- isometric stages ----------
   A stage is the exported 388×368 starter shell (or the 388×270 terrace) drawn
   at 1:1 in a positioned box, then scaled as a whole with --s so every sprite
   keeps its pixel grid. Positions come straight from the concept. */

.stage {
  position: relative;
  width: 100%;
  overflow: hidden;
  --max-s: 1;
  --s: var(--max-s);
  --w: 388px;
  --h: 368px;
  --top: 0px;
  --pad: 0px;
  height: calc(var(--h) * var(--s) + var(--top) + var(--pad));
}

.stage__scale {
  position: absolute;
  left: 0;
  top: var(--top);
  transform: scale(var(--s));
  transform-origin: top left;
}

.stage--center .stage__scale {
  left: 50%;
  transform: translateX(-50%) scale(var(--s));
  transform-origin: top center;
}

.room { position: relative; width: var(--w); height: var(--h); }
.room img { position: absolute; display: block; max-width: none; }

.room__shell { left: 0; top: 0; width: 388px; height: 368px; }
.stage--terrace { --h: 270px; }
.room--terrace .room__shell { height: 270px; }

.clip { position: absolute; overflow: hidden; }
.clip img { left: 0; top: 0; }

.bob { animation: fhBob 4.6s ease-in-out infinite; }
.bob--slow { animation: fhBobSlow 5s ease-in-out infinite; }
.bob--fast { animation: fhBob 4s ease-in-out infinite; }

.dim { filter: saturate(.7) brightness(.62) contrast(1.05); }
.dim--night { filter: saturate(.72) brightness(.62) contrast(1.04); }

.stage--together { max-width: 560px; --max-s: 1.36; }
.stage--deep { max-width: 530px; --max-s: 1.3; --pad: -8px; }
.stage--night { max-width: 530px; --max-s: 1.24; --pad: -16px; }

.stage__chip {
  position: absolute;
  background: var(--paper);
  border: 2px solid var(--line);
  box-shadow: 0 3px 0 var(--line);
  padding: 8px 12px;
  font-family: var(--pixel);
  font-size: 10px;
  letter-spacing: 1px;
  white-space: nowrap;
}

.stage__label {
  position: absolute;
  font-family: var(--pixel);
  font-size: 10px;
  letter-spacing: 3px;
}

/* ---------- together ---------- */

.together { background: linear-gradient(var(--cream), var(--band-deep)); }

.chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }

.chip {
  font-size: 14px;
  font-weight: 600;
  padding: 9px 14px;
  line-height: 1.2;
}

.chip--earned { background: var(--earned-surface); color: var(--earned-text); }
.chip--paper { background: var(--paper); border: 2px solid var(--line); padding: 7px 14px; color: var(--ink); }

/* ---------- build ---------- */

.build { background: var(--band); border-top: 2px solid var(--line); border-bottom: 2px solid var(--line); }

.build__inner { padding-block: 88px; }

.intro { max-width: 620px; }

.cards { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 48px; }

.card {
  flex: 1 1 300px;
  min-width: 0;
  background: var(--paper);
  border: 3px solid var(--wood);
  box-shadow: 0 8px 0 var(--wood-shadow);
  padding: 18px;
}

.card .stage { --max-s: .9; }

.card__kicker {
  font-family: var(--pixel);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--muted-2);
  margin-top: 6px;
}

.card__title { font-size: 16px; font-weight: 600; margin-top: 6px; }

/* ---------- store ---------- */

.store { background: var(--cream); }

.store__copy { flex: 1 1 340px; min-width: 0; }

.store__grid {
  flex: 1 1 520px;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}

.reward-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--gold-surface);
  border: 2px solid var(--gold-line);
  padding: 8px 13px;
  margin-bottom: 18px;
}

.coin {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid var(--gold-deep);
  flex: none;
}

.reward-chip__text {
  font-family: var(--pixel);
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--gold-text);
}

.item { background: var(--paper); border: 2px solid var(--line); padding: 14px; }

.item__art {
  height: 96px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: var(--band-deep);
}

.item__art img { display: block; }

.item__name { font-size: 15px; font-weight: 600; margin-top: 10px; }

.item__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}

.price { font-family: var(--pixel); font-size: 11px; color: var(--gold-text); }
.rarity { font-family: var(--pixel); font-size: 9px; letter-spacing: 1px; color: var(--rare); }

/* ---------- deep focus ---------- */

.deep {
  position: relative;
  background: linear-gradient(#2A2745, var(--night-deep));
  border-top: 3px solid var(--night-line);
  border-bottom: 3px solid var(--night-line);
  overflow: hidden;
  color: var(--night-ink);
}

.deep__glow {
  position: absolute;
  left: 50%;
  top: 120px;
  transform: translateX(-50%);
  width: 820px;
  max-width: 100%;
  height: 460px;
  background: radial-gradient(ellipse at center, rgba(245, 178, 39, .22), rgba(245, 178, 39, 0) 66%);
  animation: fhGlow 7s ease-in-out infinite;
  pointer-events: none;
}

.deep .section__inner { position: relative; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 2px solid var(--indigo-line);
  border-radius: 999px;
  padding: 8px 15px;
  margin-bottom: 22px;
}

.pill__text {
  font-family: var(--pixel);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--indigo-chip);
}

.timer {
  font-family: var(--pixel);
  font-size: clamp(56px, 9vw, 74px);
  line-height: 1;
  color: var(--night-ink);
  letter-spacing: 3px;
}

.deep .h-section--tight { margin-top: 26px; color: var(--night-ink); }
.deep .lede { margin-top: 18px; color: var(--night-muted); max-width: 400px; }

.progress { height: 8px; background: var(--indigo-track); margin-top: 28px; max-width: 400px; }
.progress__bar { width: 38%; height: 8px; background: var(--indigo); }

.deep__note { font-size: 14px; color: var(--night-muted-2); margin-top: 10px; }

.stage__label--indigo { right: 0; bottom: 6px; color: var(--indigo); }

/* ---------- floors ---------- */

.floors { background: linear-gradient(var(--band), var(--sand)); }

.floors__inner { padding-block: 88px; }

.plots {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 48px;
  align-items: flex-end;
}

.plot { flex: 1 1 300px; min-width: 0; }

.plot .stage { --max-s: .8; --top: 4px; --pad: 2px; }
.plot .stage--terrace { --max-s: .86; --top: 40px; --pad: 28px; }

.plot__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-top: 2px solid var(--wood-shadow);
  padding-top: 12px;
  margin-top: 8px;
}

.plot__name { font-family: var(--pixel); font-size: 11px; letter-spacing: 2px; }
.plot__price { font-family: var(--pixel); font-size: 11px; color: var(--gold-text); }

/* ---------- night ---------- */

.night {
  position: relative;
  background: linear-gradient(#061021 0%, #0E1B38 32%, #04070F 78%, #020409 100%);
  border-top: 3px solid #020409;
  border-bottom: 3px solid #020409;
  overflow: hidden;
  color: var(--night-ink);
}

.night .section__inner { position: relative; }
.night .eyebrow { color: var(--indigo); }
.night .h-section { color: var(--night-ink); font-size: clamp(34px, 5.2vw, 48px); line-height: 1.04; }
.night .lede { color: var(--night-muted); max-width: 400px; }

.lamp-glow {
  position: absolute;
  pointer-events: none;
  mix-blend-mode: screen;
  animation: fhGlow 9s ease-in-out infinite;
}

.lamp-glow--warm {
  left: 60px;
  top: 150px;
  width: 270px;
  height: 270px;
  background: radial-gradient(circle, rgba(245, 178, 39, .34), rgba(245, 178, 39, .10) 42%, rgba(245, 178, 39, 0) 70%);
}

.lamp-glow--soft {
  left: 196px;
  top: 96px;
  width: 210px;
  height: 210px;
  background: radial-gradient(circle, rgba(255, 214, 140, .26), rgba(255, 214, 140, 0) 68%);
  animation-duration: 11s;
  animation-delay: -3s;
}

.stage__label--night { right: 0; bottom: 0; color: var(--night-muted-2); }

/* ---------- check in ---------- */

.checkin { background: var(--sand); border-top: 3px solid var(--wood); }

.checkin__inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 88px var(--gutter);
  text-align: center;
}

.checkin__icon {
  width: 82px;
  height: 82px;
  border: 3px solid var(--wood);
  box-shadow: 0 6px 0 var(--wood-shadow);
  display: inline-block;
}

.checkin .h-section { margin-top: 28px; font-size: clamp(40px, 6vw, 56px); line-height: 1; letter-spacing: -0.036em; }
.checkin .lede { margin: 18px auto 0; font-size: 19px; max-width: 440px; }
.checkin .badges { justify-content: center; margin-top: 34px; gap: 20px; }

/* ---------- footer ---------- */

.footer { background: var(--footer); color: var(--footer-text); }

.footer__inner {
  padding-block: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
}

.footer .brand__icon { width: 26px; height: 26px; border: 0; }
.footer .brand__name { font-size: 13px; color: var(--cream); }

.footer__links { display: flex; flex-wrap: wrap; gap: 26px; font-size: 14px; align-items: center; }
.footer__links a { color: var(--footer-text); }
.footer__links a:hover { color: var(--cream); }

.footer__copy { font-size: 13px; color: var(--footer-muted); }

/* ---------- motion ---------- */

@keyframes fhBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes fhBobSlow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes fhGlow { 0%, 100% { opacity: .5; } 50% { opacity: .85; } }
@keyframes fhCloud { from { transform: translateX(-220px); } to { transform: translateX(calc(100vw + 220px)); } }
@keyframes fhTwinkle { 0%, 100% { opacity: .95; } 50% { opacity: .45; } }
@keyframes fhShoot {
  0% { opacity: 0; transform: translate(0, 0); }
  1% { opacity: 1; }
  4% { opacity: 1; transform: translate(30vw, 90px); }
  5% { opacity: 0; transform: translate(34vw, 100px); }
  100% { opacity: 0; transform: translate(34vw, 100px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cloud, .star, .shooting-star, .bob, .bob--slow, .bob--fast, .deep__glow, .moon-glow, .lamp-glow {
    animation: none;
  }
  .shooting-star { display: none; }
  .cloud { transform: translateX(20vw); }
  .cloud:nth-child(2) { transform: translateX(55vw); }
  .cloud:nth-child(3) { transform: translateX(80vw); }
}