/* ==========================================================================
   Landing Page — "The Front Desk" theme
   Hotel Management System
   ========================================================================== */

:root{
  --ink:        #0F3D2E;   /* deep lobby emerald   */
  --ink-2:      #0B2E22;   /* darker emerald, panels */
  --brass:      #C9A227;   /* brass fittings        */
  --brass-light:#E8C766;
  --burgundy:   #7A2E2E;   /* velvet rope accent    */
  --paper:      #F7F3EA;   /* ivory stationery      */
  --paper-dim:  #EFE8D8;
  --sage:       #DCE8DE;   /* card fill             */
  --charcoal:   #1C2321;
  --charcoal-60:rgba(28,35,33,.62);
  --line:       rgba(15,61,46,.16);

  --font-display: "Fraunces", "Georgia", serif;
  --font-body:    "Work Sans", "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", "Courier New", monospace;

  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --ease-soft:   cubic-bezier(.22, 1, .36, 1);
}

/* -------------------------------------------------------------- base --- */
.hms-landing{
  font-family: var(--font-body);
  color: var(--charcoal);
  background: var(--paper);
  overflow-x: hidden;
}

.hms-landing *{ box-sizing: border-box; }

.hms-landing h1, .hms-landing h2, .hms-landing h3{
  font-family: var(--font-display);
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0;
}

.hms-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--burgundy);
}

.hms-eyebrow::before{
  content: "";
  width: 18px;
  height: 2px;
  background: var(--brass);
  display: inline-block;
}

.hms-section{
  padding: 5.5rem 0;
}

.hms-section-head{
  max-width: 620px;
  margin: 0 0 2.75rem;
}

.hms-section-head p{
  color: var(--charcoal-60);
  font-size: 1.05rem;
  line-height: 1.65;
  margin-top: .9rem;
}

/* ------------------------------------------------------------- hero --- */
.hms-hero{
  background:
    radial-gradient(circle at 85% -10%, rgba(201,162,39,.20), transparent 55%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  color: var(--paper);
  padding: 4.5rem 0 5rem;
  position: relative;
}

.hms-hero::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height: 6px;
  background: repeating-linear-gradient(90deg, var(--brass) 0 22px, transparent 22px 30px);
  opacity:.55;
}

.hms-hero-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 3rem;
  align-items:center;
}

.hms-hero h1{
  color: var(--paper);
  font-size: clamp(2.4rem, 4vw, 3.5rem);
  line-height: 1.06;
  animation: hms-rise .8s var(--ease-bounce) both;
}

.hms-hero h1 em{
  font-style: normal;
  color: var(--brass-light);
}

.hms-hero-lede{
  margin-top: 1.25rem;
  font-size: 1.12rem;
  max-width: 46ch;
  color: rgba(247,243,234,.78);
  line-height: 1.7;
  animation: hms-rise .8s .1s var(--ease-bounce) both;
}

.hms-hero-actions{
  margin-top: 2.1rem;
  display:flex;
  gap: .9rem;
  flex-wrap: wrap;
  animation: hms-rise .8s .2s var(--ease-bounce) both;
}

.hms-btn{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .95rem;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  text-decoration:none;
  transition: transform .35s var(--ease-bounce), box-shadow .35s var(--ease-soft);
}

.hms-btn:hover{ transform: translateY(-3px) scale(1.03); }
.hms-btn:active{ transform: translateY(0) scale(.98); }

.hms-btn-brass{
  background: var(--brass);
  color: var(--ink-2);
  box-shadow: 0 10px 24px -10px rgba(201,162,39,.65);
}
.hms-btn-brass:hover{ box-shadow: 0 16px 30px -10px rgba(201,162,39,.8); }

.hms-btn-ghost{
  background: transparent;
  color: var(--paper);
  border-color: rgba(247,243,234,.35);
}
.hms-btn-ghost:hover{ border-color: var(--brass-light); color: var(--brass-light); }

.hms-hero-stats{
  margin-top: 2.75rem;
  display:flex;
  gap: 2.2rem;
  animation: hms-rise .8s .3s var(--ease-bounce) both;
}

.hms-hero-stats div strong{
  display:block;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  color: var(--brass-light);
}
.hms-hero-stats div span{
  font-size: .78rem;
  color: rgba(247,243,234,.6);
}

/* --- the arrivals board (signature element) --- */
.hms-board{
  background: var(--ink-2);
  border: 1px solid rgba(201,162,39,.3);
  border-radius: 14px;
  padding: 1.4rem;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.55);
  animation: hms-board-in .9s .25s var(--ease-bounce) both;
}

.hms-board-head{
  display:flex;
  justify-content: space-between;
  align-items:center;
  padding-bottom: .9rem;
  margin-bottom: .6rem;
  border-bottom: 1px dashed rgba(201,162,39,.35);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brass-light);
}

.hms-board-head .hms-live{
  display:inline-flex; align-items:center; gap:.4rem; color: #8FD3A8;
}
.hms-board-head .hms-live::before{
  content:"";
  width:7px; height:7px; border-radius:50%;
  background:#8FD3A8;
  animation: hms-pulse 1.6s ease-in-out infinite;
}

.hms-flap-row{
  display:grid;
  grid-template-columns: 2.4rem 1fr 4.6rem 6rem;
  gap: .6rem;
  align-items:center;
  padding: .6rem .3rem;
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--paper);
  border-bottom: 1px solid rgba(247,243,234,.08);
  transform-origin: top center;
  animation: hms-flap .6s var(--ease-bounce) both;
}

.hms-flap-row:nth-child(2){ animation-delay: .45s; }
.hms-flap-row:nth-child(3){ animation-delay: .60s; }
.hms-flap-row:nth-child(4){ animation-delay: .75s; }
.hms-flap-row:nth-child(5){ animation-delay: .90s; }

.hms-flap-row .hms-room{ color: var(--brass-light); }
.hms-flap-row .hms-guest{ color: rgba(247,243,234,.85); }

.hms-status{
  justify-self:start;
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .68rem;
  letter-spacing:.04em;
}
.hms-status-ready{ background: rgba(143,211,168,.16); color:#8FD3A8; }
.hms-status-clean{ background: rgba(201,162,39,.16); color: var(--brass-light); }
.hms-status-occ{   background: rgba(122,46,46,.28); color:#E39A9A; }

/* ---------------------------------------------------------- marquee --- */
.hms-marquee{
  background: var(--paper-dim);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: .85rem 0;
  overflow: hidden;
}
.hms-marquee-track{
  display:flex;
  gap: 3.2rem;
  width: max-content;
  animation: hms-scroll 22s linear infinite;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--charcoal-60);
}
.hms-marquee-track span{ display:flex; align-items:center; gap:.6rem; white-space: nowrap; }
.hms-marquee-track span::before{ content:"✦"; color: var(--brass); }

/* --------------------------------------------------------- features --- */
.hms-keys{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}

.hms-key{
  background: var(--sage);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.7rem 1.5rem;
  position: relative;
  opacity: 0;
  transform: translateY(26px) scale(.94);
  transition: transform .6s var(--ease-bounce), box-shadow .35s var(--ease-soft), border-color .35s;
}

.hms-key.hms-in-view{
  animation: hms-key-in .65s var(--ease-bounce) forwards;
}

.hms-key::before{
  content:"";
  position:absolute; top: 1.5rem; right: 1.5rem;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--brass);
}

.hms-key:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 30px -16px rgba(15,61,46,.35);
  border-color: var(--brass);
}

.hms-key-num{
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--burgundy);
  letter-spacing: .08em;
}

.hms-key h3{
  font-size: 1.18rem;
  margin: .6rem 0 .55rem;
}

.hms-key p{
  color: var(--charcoal-60);
  font-size: .93rem;
  line-height: 1.6;
  margin: 0;
}

.hms-key .fas, .hms-key .fa{
  color: var(--ink);
  background: var(--paper);
  width: 42px; height: 42px;
  border-radius: 10px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom: .9rem;
  font-size: 1.05rem;
  border: 1px solid var(--line);
}

/* -------------------------------------------------------- why-choose --- */
.hms-why{
  background: var(--ink);
  color: var(--paper);
  border-radius: 22px;
  padding: 3.2rem;
  display:grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 3rem;
  align-items:center;
  position:relative;
  overflow:hidden;
}

.hms-why::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(circle at 100% 100%, rgba(201,162,39,.16), transparent 60%);
}

.hms-why-copy, .hms-ledger{ position:relative; }

.hms-eyebrow-on-dark{ color: var(--brass-light); }
.hms-eyebrow-on-dark::before{ background: var(--brass-light); }

.hms-why h2{ color: var(--paper); font-size: 2rem; }
.hms-why p{ color: rgba(247,243,234,.75); margin-top: 1rem; line-height: 1.7; }

.hms-ledger{
  display:flex; flex-direction:column; gap: 0;
}

.hms-ledger-row{
  display:flex; justify-content:space-between; align-items:baseline;
  padding: 1rem 0;
  border-bottom: 1px dashed rgba(201,162,39,.3);
}
.hms-ledger-row:first-child{ padding-top: 0; }
.hms-ledger-row:last-child{ border-bottom:none; }

.hms-ledger-row .hms-l-label{
  font-size: .98rem;
  color: rgba(247,243,234,.9);
}
.hms-ledger-row .hms-l-tag{
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--brass-light);
  letter-spacing: .06em;
}

/* -------------------------------------------------------------- cta --- */
.hms-cta{
  background: var(--paper-dim);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 3rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.hms-bell{
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--brass);
  color: var(--ink-2);
  display:flex; align-items:center; justify-content:center;
  font-size: 1.4rem;
  flex: none;
  animation: hms-bell-idle 3.2s ease-in-out infinite;
  cursor: pointer;
}
.hms-bell:hover{ animation: hms-bell-ring .55s var(--ease-bounce); }
.hms-bell.hms-ring-now{ animation: hms-bell-ring .55s var(--ease-bounce); }

.hms-cta-copy h2{ font-size: 1.7rem; }
.hms-cta-copy p{ color: var(--charcoal-60); margin-top: .5rem; }

/* ------------------------------------------------------------ motion --- */
@keyframes hms-rise{
  from{ opacity:0; transform: translateY(18px); }
  to{ opacity:1; transform: translateY(0); }
}

@keyframes hms-board-in{
  0%{ opacity:0; transform: translateY(24px) rotateX(8deg) scale(.96); }
  100%{ opacity:1; transform: translateY(0) rotateX(0) scale(1); }
}

@keyframes hms-flap{
  0%{ opacity:0; transform: rotateX(-90deg); }
  60%{ opacity:1; transform: rotateX(12deg); }
  100%{ opacity:1; transform: rotateX(0); }
}

@keyframes hms-key-in{
  0%{ opacity:0; transform: translateY(26px) scale(.94); }
  60%{ opacity:1; transform: translateY(-6px) scale(1.015); }
  100%{ opacity:1; transform: translateY(0) scale(1); }
}

@keyframes hms-pulse{
  0%, 100%{ opacity:1; transform: scale(1); }
  50%{ opacity:.4; transform: scale(1.3); }
}

@keyframes hms-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

@keyframes hms-bell-idle{
  0%, 100%{ transform: rotate(0deg); }
  92%{ transform: rotate(0deg); }
  94%{ transform: rotate(-8deg); }
  96%{ transform: rotate(8deg); }
  98%{ transform: rotate(-4deg); }
}

@keyframes hms-bell-ring{
  0%{ transform: rotate(0deg) scale(1); }
  30%{ transform: rotate(-18deg) scale(1.08); }
  60%{ transform: rotate(14deg) scale(1.08); }
  100%{ transform: rotate(0deg) scale(1); }
}

/* -------------------------------------------------------- responsive --- */
@media (max-width: 991px){
  .hms-hero-grid{ grid-template-columns: 1fr; }
  .hms-keys{ grid-template-columns: repeat(2, 1fr); }
  .hms-why{ grid-template-columns: 1fr; padding: 2.2rem; }
}

@media (max-width: 575px){
  .hms-keys{ grid-template-columns: 1fr; }
  .hms-cta{ flex-direction: column; text-align:center; }
  .hms-hero-stats{ flex-wrap: wrap; row-gap: 1rem; }
  .hms-flap-row{ grid-template-columns: 2rem 1fr 4rem; }
  .hms-flap-row .hms-guest{ display:none; }
}

/* --------------------------------------------------- reduced motion --- */
@media (prefers-reduced-motion: reduce){
  .hms-landing *{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* -------------------------------------------------------- a11y focus --- */
.hms-landing a:focus-visible,
.hms-landing button:focus-visible{
  outline: 3px solid var(--brass);
  outline-offset: 3px;
}