/* ============================================================================
   SideSeat landing — dark cinematic theme. Loaded only by index.html (room.html
   keeps style.css). Overrides the few shared rules from style.css by id/scope.
   ========================================================================== */
.landing {
  --bg: #0a0b18;
  --bg-2: #0e1024;
  --panel: rgba(255, 255, 255, 0.028);
  --panel-solid: #12142a;
  --border: rgba(255, 255, 255, 0.085);
  --border-soft: rgba(255, 255, 255, 0.055);
  --text: #eef0f8;
  --muted: #9aa0bd;
  --faint: #6b7196;
  --violet: #8b5cf6;
  --indigo: #6366f1;
  --blue: #3b82f6;
  --grad: linear-gradient(135deg, #8b5cf6 0%, #6366f1 52%, #3b82f6 100%);

  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  text-align: left;
}
.landing a { color: inherit; text-decoration: none; }

/* Smooth jumps, and land each section just below the sticky header instead of
   under it (so a nav click shows the section from its very beginning). */
html { scroll-behavior: smooth; }
.landing section[id] { scroll-margin-top: 84px; }

/* Ambient glows behind the page */
.landing .bg-glows {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60vw 40vw at 72% -5%, rgba(139, 92, 246, 0.22), transparent 60%),
    radial-gradient(50vw 40vw at 10% 0%, rgba(59, 130, 246, 0.14), transparent 55%),
    radial-gradient(60vw 50vw at 50% 110%, rgba(99, 102, 241, 0.10), transparent 60%);
}
.landing > *:not(.bg-glows) { position: relative; z-index: 1; }
.landing main { max-width: 1360px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px) 72px; }

/* ---------- Buttons ---------- */
.landing .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-weight: 600; font-size: 0.95rem; line-height: 1; cursor: pointer;
  border: 1px solid transparent; border-radius: 12px; padding: 12px 20px;
  color: #fff; background: transparent; transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
.landing .btn .chev { font-size: 1.15em; opacity: .85; margin-left: -2px; }
.landing .btn-ico { display: inline-flex; margin: -2px 0; }
.landing .btn-primary { background: var(--grad); box-shadow: 0 10px 26px rgba(99, 102, 241, 0.35); }
.landing .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(99, 102, 241, 0.5); }
.landing .btn-ghost { background: rgba(255, 255, 255, 0.04); border-color: var(--border); color: var(--text); }
.landing .btn-ghost:hover { border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.07); transform: translateY(-2px); }
.landing .btn-sm { padding: 9px 16px; border-radius: 10px; font-size: 0.88rem; }
.landing .btn-lg { padding: 15px 24px; font-size: 1rem; border-radius: 13px; }
.landing .btn-block { width: 100%; margin-top: 4px; }

/* ---------- Nav ---------- */
.landing .nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 24px;
  max-width: 1360px; margin: 0 auto; padding: 16px clamp(16px, 4vw, 48px);
  backdrop-filter: blur(8px);
}
.landing .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.2rem; }
/* Real logo from the brand sheet: app-icon tile + the exact wordmark */
.landing .brand-mark-img { height: 38px; width: auto; display: block; border-radius: 9px; }
.landing .brand-word { height: 23px; width: auto; display: block; }
.landing .foot .brand-mark-img { height: 30px; }
.landing .foot .brand-word { height: 19px; }
.landing .nav-links { display: flex; gap: 26px; margin-left: 28px; flex: 1; }
.landing .nav-links a { color: var(--muted); font-size: 0.92rem; font-weight: 500; padding: 4px 0; transition: color .15s; }
.landing .nav-links a:hover { color: var(--text); }
.landing .nav-links a.active { color: var(--text); border-bottom: 2px solid var(--violet); }

/* ---------- Hero ---------- */
.landing .hero {
  position: relative; display: flex; align-items: center;
  min-height: clamp(460px, 56vw, 620px); padding: 48px 0;
}
/* Hero photo as a wallpaper: full screen width, only the hero's height, the
   image kept roughly where it was (people on the right), and every edge
   feathered so it melts into the page instead of sitting in a hard box. */
.landing .hero-bg {
  position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100vw; z-index: 0; pointer-events: none;
  background: url("/assets/hero.jpg") center right / cover no-repeat;
  -webkit-mask: radial-gradient(120% 135% at 70% 48%, #000 40%, rgba(0, 0, 0, 0) 82%);
          mask: radial-gradient(120% 135% at 70% 48%, #000 40%, rgba(0, 0, 0, 0) 82%);
}
.landing .hero-bg::after {   /* left-side scrim so the copy stays readable */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--bg) 0%, rgba(10, 11, 24, 0.72) 30%, rgba(10, 11, 24, 0) 62%);
}
.landing .hero-copy { position: relative; z-index: 1; max-width: 600px; }
.landing .eyebrow {
  text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.74rem; font-weight: 600;
  color: var(--violet); margin: 0 0 16px;
}
.landing .hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.5rem); line-height: 1.07; margin: 0 0 20px; font-weight: 800; letter-spacing: -0.01em; }
.landing .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.landing .lead { color: var(--muted); font-size: 1.05rem; line-height: 1.6; max-width: 32em; margin: 0 0 28px; }
.landing .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 30px; }

.landing .hero-feats { display: flex; gap: 26px; flex-wrap: wrap; }
.landing .feat { display: flex; align-items: center; gap: 11px; }
.landing .feat-ico {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 38px; height: 38px; border-radius: 11px; color: var(--violet);
  background: rgba(139, 92, 246, 0.12); border: 1px solid rgba(139, 92, 246, 0.22);
}
.landing .feat div { display: flex; flex-direction: column; line-height: 1.3; }
.landing .feat b { font-size: 0.9rem; }
.landing .feat span { font-size: 0.78rem; color: var(--faint); }

/* Hero scene */
.landing .hero-art { position: relative; }
.landing .hero-scene {
  position: relative; aspect-ratio: 14 / 10; border-radius: 20px; overflow: hidden;
  border: 1px solid var(--border); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}
.landing .hero-scene svg { display: block; width: 100%; height: 100%; }
.landing .hero-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.landing .watching-badge {
  position: absolute; top: 16px; right: 16px;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 13px; border-radius: 13px;
  background: rgba(14, 16, 34, 0.82); backdrop-filter: blur(8px);
  border: 1px solid var(--border);
}
.landing .wb-avatars { display: inline-flex; }
.landing .wb-avatars i {
  width: 24px; height: 24px; border-radius: 50%; background: var(--a, #888);
  border: 2px solid #0e1022; margin-left: -8px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 0.8rem; color: #fff; font-style: normal;
}
.landing .wb-avatars i:first-child { margin-left: 0; }
.landing .wb-avatars i.more { background: rgba(255, 255, 255, 0.14); font-weight: 600; }
.landing .wb-text { font-size: 0.82rem; color: var(--muted); }
.landing .wb-text b { color: var(--text); }

/* ---------- Steps (the real app) ---------- */
.landing .steps {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 18px; align-items: stretch;
  padding: 10px 0 8px;
}
.landing .step-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 18px;
  padding: 22px; display: flex; flex-direction: column; gap: 16px;
}
.landing .step-head { display: flex; align-items: flex-start; gap: 14px; }
.landing .step-num {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 11px; font-weight: 700; font-size: 0.95rem;
  color: var(--violet); background: rgba(139, 92, 246, 0.13); border: 1px solid rgba(139, 92, 246, 0.25);
}
.landing .step-head h3 { margin: 2px 0 3px; font-size: 1.1rem; }
.landing .step-head p { margin: 0; font-size: 0.84rem; color: var(--faint); line-height: 1.45; }
.landing .step-arrow { align-self: center; color: var(--faint); font-size: 1.6rem; opacity: 0.6; }

/* Fields with a leading icon */
.landing #create-room, .landing #join-room { display: flex; flex-direction: column; gap: 10px; }
.landing .field { position: relative; display: block; }
.landing .field-ico {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--faint); display: inline-flex; pointer-events: none;
}
.landing .field input {
  width: 100%; background: rgba(255, 255, 255, 0.035); border: 1px solid var(--border);
  color: var(--text); border-radius: 11px; padding: 12px 14px 12px 40px; font-size: 0.9rem;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.landing .field input::placeholder { color: var(--faint); }
.landing .field input:focus {
  outline: none; border-color: var(--violet); background: rgba(139, 92, 246, 0.06);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}
.landing .pwd-field input { padding-right: 42px; }
.landing .pwd-field .eye {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: transparent; border: none; cursor: pointer; font-size: 1.05rem;
  opacity: 0.6; padding: 4px; line-height: 1;
}
.landing .pwd-field .eye:hover, .landing .pwd-field .eye.on { opacity: 1; }

/* Beat style.css's #create-room button / #join-room button (id specificity) */
.landing #create-room .btn-primary,
.landing #join-room .btn-primary { background: var(--grad); border: 1px solid transparent; color: #fff; }

.landing .msg { grid-column: 1 / -1; text-align: center; color: #ff9b9b; font-size: 0.9rem; min-height: 1.2em; margin: 4px 0 0; }

/* ---------- Section heads ---------- */
.landing .section-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  margin: 64px 0 26px;
}
.landing .section-head h2 { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 800; letter-spacing: -0.01em; max-width: 14em; }
.landing .section-note { color: var(--muted); font-size: 0.92rem; line-height: 1.55; max-width: 26em; margin: 0; }

/* ---------- How it works ---------- */
.landing .how-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.landing .how-card {
  position: relative; background: var(--panel); border: 1px solid var(--border);
  border-radius: 18px; padding: 24px; transition: transform .14s ease, border-color .14s ease;
}
.landing .how-card:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.18); }
.landing .how-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px; font-weight: 700; font-size: 0.95rem;
  color: #fff; background: var(--grad); box-shadow: 0 6px 16px rgba(99, 102, 241, 0.35);
  margin-bottom: 14px;
}
.landing .how-card h3 { margin: 0 0 8px; font-size: 1.12rem; }
.landing .how-card p { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.6; }
.landing .how-card p b { color: var(--text); }
.landing kbd {
  display: inline-block; min-width: 1.1em; text-align: center; padding: 1px 7px;
  font: 600 0.82em/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text);
  background: rgba(255, 255, 255, 0.07); border: 1px solid var(--border);
  border-bottom-width: 2px; border-radius: 6px; vertical-align: baseline;
}

.landing .how-cta {
  margin-top: 26px; padding: 40px 28px; border-radius: 20px; text-align: center;
  border: 1px solid rgba(139, 92, 246, 0.28);
  background:
    radial-gradient(90% 140% at 50% 0%, rgba(139, 92, 246, 0.18), transparent 70%),
    var(--panel);
}
.landing .how-cta h3 { margin: 0 0 10px; font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 800; }
.landing .how-cta-lead { margin: 0 0 6px; font-size: 1.05rem; font-weight: 600; color: var(--text); }
.landing .how-cta-sub { margin: 0 auto 22px; max-width: 42em; color: var(--muted); line-height: 1.6; }

/* ---------- Platforms ---------- */
.landing .platform-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.landing .pg-card { background: var(--panel); border: 1px solid var(--border); border-radius: 18px; padding: 20px; }
.landing .pg-title { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 0.98rem; margin-bottom: 16px; }
.landing .pg-title .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--d, #888); box-shadow: 0 0 10px var(--d, #888); }
.landing .pg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 10px; }
.landing .chip {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px;
  border-radius: 13px; border: 1px solid var(--border-soft); background: rgba(255, 255, 255, 0.02);
  transition: transform .12s, border-color .15s, background .15s;
}
.landing .chip:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.05); }
.landing .chip-mark {
  width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.95rem; color: #fff; background: var(--brand, #555);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}
/* Real brand logo, painted white so it reads on the brand-colour tile */
.landing .chip-logo {
  display: block; width: 60%; height: 60%; background: #fff;
  -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat;
}
.landing .chip span:last-child { font-size: 0.72rem; color: var(--muted); text-align: center; line-height: 1.2; }
.landing .chip:hover span:last-child { color: var(--text); }
.landing .pg-cap { margin: 16px 0 0; font-size: 0.78rem; color: var(--faint); }
.landing .platforms-foot { margin: 22px 0 0; font-size: 0.86rem; color: var(--muted); line-height: 1.6; max-width: 60em; }
.landing .platforms-foot b { color: var(--text); }

/* ---------- Cities ---------- */
.landing .city-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr);
  gap: 14px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin;
}
.landing .city {
  position: relative; height: 180px; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--border);
  background: #0a0912 center / cover no-repeat;
  transition: transform .15s ease, border-color .15s ease;
}
.landing .city:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.2); }
.landing .city::after {    /* darken the foot for text legibility */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 38%, rgba(5, 4, 12, 0.88) 100%);
}
.landing .city-label { position: absolute; left: 14px; bottom: 12px; z-index: 1; display: flex; flex-direction: column; line-height: 1.25; }
.landing .city-label b { font-size: 0.98rem; }
.landing .city-label span { font-size: 0.76rem; color: rgba(255, 255, 255, 0.72); }

/* ---------- Footer ---------- */
.landing .foot {
  margin-top: 70px; padding-top: 28px; border-top: 1px solid var(--border-soft);
  display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center;
}
.landing .foot p { margin: 0; color: var(--faint); font-size: 0.86rem; }

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
  /* Hero photo sits behind the copy; a vertical scrim keeps the text readable. */
  .landing .hero { min-height: 440px; padding: 36px 0; }
  .landing .hero-bg { background-position: center; }
  .landing .hero-bg::after {
    background: linear-gradient(180deg, rgba(10, 11, 24, 0.5) 0%, rgba(10, 11, 24, 0.85) 100%);
  }
  .landing .hero-copy { max-width: 100%; }
  .landing .steps { grid-template-columns: 1fr; }
  .landing .step-arrow { transform: rotate(90deg); justify-self: center; }
  .landing .platform-groups { grid-template-columns: 1fr; }
  .landing .how-grid { grid-template-columns: repeat(2, 1fr); }
  .landing .nav-links { display: none; }
  .landing .nav { margin-left: 0; }
  .landing .section-head { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (max-width: 560px) {
  .landing main { padding: 0 16px 48px; }
  .landing .nav { padding: 14px 16px; }
  .landing .hero-cta .btn { flex: 1; }
  .landing .how-grid { grid-template-columns: 1fr; }
  /* A long one-line button ("Create a room · Start watching together") was
     wider than a phone, which made the browser zoom the whole page out. */
  .landing .btn-lg { white-space: normal; max-width: 100%; text-align: center; line-height: 1.25; }
  .landing .how-cta { padding: 32px 18px; }
}