/* Viberoom: public site (landing, features, how it works, FAQ, about, privacy).
   Shares the editor's dark palette so the marketing pages and the app feel like
   one product, but is laid out for reading rather than for tool chrome. */

:root {
  --bg: #141414;
  --bg-raised: #1c1c1c;
  --panel: #232323;
  --line: #303030;
  --text: #d6d6d6;
  --text-bright: #f2f2f2;
  --dim: #8d8d8d;
  --accent: #4a90d9;
  --accent-soft: rgba(74, 144, 217, .14);
  --max: 1080px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

html[lang="zh-TW"] body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC",
               "Microsoft JhengHei", "Segoe UI", sans-serif;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(20, 20, 20, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 60px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text-bright);
  font-size: 18px;
  letter-spacing: .3px;
}

.brand:hover { text-decoration: none; }

/* The logo ships with its own near-black plate, so it is cropped square and
   rounded like an app icon rather than floated on the header background. */
.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  object-fit: cover;
  display: block;
}

/* A placeholder wordmark until a real logo exists: a technical monospace face
   rather than the script it used to be. */
.brand-name {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono", Menlo,
               Consolas, monospace;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.4px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
  font-size: 14px;
}

.site-nav a { color: var(--dim); }
.site-nav a:hover { color: var(--text-bright); text-decoration: none; }

/* A button that happens to sit in the nav is still a button: the grey link
   colour above outranks .btn-primary on specificity, which is what used to
   leave "Open the editor" unreadable against the blue. */
.site-nav a.btn-primary,
.site-nav a.btn-primary:hover { color: #0c0c0c; }
.site-nav a.btn-ghost { color: var(--text); }
.site-nav a.btn-ghost:hover { color: var(--text-bright); }

.btn {
  display: inline-block;
  padding: 9px 18px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}

/* Black on the blue reads far more clearly than white or grey does. */
.btn-primary {
  background: var(--accent);
  color: #0c0c0c;
}
.btn-primary:hover { background: #5b9de0; color: #0c0c0c; text-decoration: none; }

.btn-ghost {
  border-color: var(--line);
  color: var(--text);
  background: transparent;
}
.btn-ghost:hover { border-color: #4a4a4a; color: var(--text-bright); text-decoration: none; }

.btn-lg { padding: 12px 26px; font-size: 15px; }

/* Native select chrome looks out of place against the dark header, so the arrow
   is drawn here and the platform one removed. */
#lang-switch {
  appearance: none;
  -webkit-appearance: none;
  padding: 6px 28px 6px 11px;
  background-color: var(--bg-raised);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%238d8d8d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color .15s, color .15s, background-color .15s;
}

#lang-switch:hover {
  border-color: #4a4a4a;
  color: var(--text-bright);
  background-color: #242424;
}

#lang-switch:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

/* The dropdown list itself is drawn by the platform: keep it dark on the
   platforms that honour this. */
#lang-switch option { background: var(--bg-raised); color: var(--text); }

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

.hero {
  position: relative;
  padding: 64px 0 56px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(760px 380px at 18% -10%, rgba(74, 144, 217, .16), transparent 70%),
    radial-gradient(620px 340px at 88% 8%, rgba(200, 120, 60, .10), transparent 70%);
  overflow: hidden;
}

/* Copy on the left, the editor mock on the right. */
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 44px;
  align-items: center;
  min-height: 0;
}

.hero-copy { min-width: 0; }

.hero h1 {
  margin: 0 0 16px;
  max-width: 14ch;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -.5px;
  color: var(--text-bright);
}

/* ch is sized from a Latin digit, so it under-constrains a CJK headline and
   lets it break mid-word. Full-width em keeps the break where it reads. */
html[lang="zh-TW"] .hero h1 { max-width: 7em; }

.hero .lede {
  max-width: 40ch;
  margin: 0 0 28px;
  font-size: 17px;
  color: var(--dim);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.hero-note {
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--dim);
}

/* A CSS-only mock of the editor: cheaper and sharper than a screenshot, and it
   never goes stale when the interface changes. */
.hero-mock {
  width: 100%;
  align-self: center;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
  background: var(--panel);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .5);
}

.mock-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  background: linear-gradient(to bottom, #2c2c2c, #232323);
  border-bottom: 1px solid #101010;
}

.mock-dot { width: 10px; height: 10px; border-radius: 50%; background: #3d3d3d; }

.mock-modules {
  margin-left: 16px;
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: #6f6f6f;
}
.mock-modules .on { color: var(--text-bright); font-weight: 600; }

.mock-body {
  display: grid;
  grid-template-columns: 116px 1fr 136px;
  flex: 1 1 auto;
  min-height: 320px;
  overflow: hidden;
}

.mock-rail { padding: 12px 10px; background: #202020; overflow: hidden; }
.mock-rail.right { border-left: 1px solid #101010; }
.mock-rail:not(.right) { border-right: 1px solid #101010; }

.mock-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: #6f6f6f;
  margin: 0 0 9px;
}

.mock-slider { margin-bottom: 11px; }
.mock-slider span {
  display: block;
  font-size: 10px;
  color: #9a9a9a;
  margin-bottom: 4px;
}
.mock-track {
  height: 3px;
  background: #383838;
  border-radius: 2px;
  position: relative;
}
.mock-track i {
  position: absolute;
  top: -3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #cfcfcf;
}

.mock-canvas {
  background:
    linear-gradient(140deg, #6b4a2f 0%, #a8703c 26%, #d8a25c 46%, #6f8ea6 70%, #24455e 100%);
  position: relative;
}
.mock-canvas::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 42%, transparent 42%, rgba(0, 0, 0, .48) 100%);
}

.mock-histogram {
  height: 54px;
  margin-bottom: 14px;
  border-radius: 3px;
  background:
    linear-gradient(to top, rgba(74, 144, 217, .5), transparent),
    #171717;
  position: relative;
  overflow: hidden;
}
.mock-histogram::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 76%;
  background: linear-gradient(to right,
    transparent 2%, rgba(220, 90, 80, .42) 18%, rgba(110, 200, 130, .42) 42%,
    rgba(90, 150, 230, .42) 66%, transparent 96%);
  clip-path: polygon(0 100%, 6% 72%, 15% 40%, 27% 58%, 38% 22%, 52% 46%, 65% 30%, 78% 62%, 90% 80%, 100% 100%);
}

/* ------------------------------------------------------- home, one screen

   The home page is deliberately a single screen: header, hero and footer share
   the viewport and nothing scrolls. The hero is the only flexible row, and the
   mock inside it absorbs whatever height is left over. Everything that used to
   sit below the fold now lives on /features, /how-it-works and /faq.

   Only applied where there is room for it — narrow or short windows fall back
   to ordinary scrolling rather than clipping the buttons away. */

@media (min-width: 721px) and (min-height: 620px) {
  body.home {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  body.home main {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
  }

  body.home .hero {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    min-height: 0;
    padding: 32px 0;
    border-bottom: 0;
  }

  body.home .hero .wrap { min-height: 0; }
  body.home .site-footer { padding: 16px 0; flex: 0 0 auto; }
}

/* ----------------------------------------------------------- page header */

.page-head { padding: 56px 0 4px; }
.page-head .section-lede { margin-bottom: 0; }

/* The page title already carries the top spacing, so the section under it does
   not need its own. */
.page-head + section { padding-top: 24px; }

.page-head h1 {
  margin: 0 0 12px;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.4px;
  color: var(--text-bright);
}

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

section { padding: 68px 0; border-bottom: 1px solid var(--line); }

h2 {
  margin: 0 0 12px;
  font-size: clamp(24px, 3.2vw, 32px);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.3px;
  color: var(--text-bright);
}

.section-lede {
  max-width: 62ch;
  margin: 0 0 40px;
  color: var(--dim);
  font-size: 16px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 20px;
}

.card {
  padding: 24px 22px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 9px;
}

.card h3 {
  margin: 0 0 9px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-bright);
}

.card p { margin: 0; font-size: 14.5px; color: var(--dim); }

.card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 14px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
}

/* steps */

.steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 26px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.steps li { counter-increment: step; }

.steps li::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-bottom: 13px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
}

.steps h3 { margin: 0 0 7px; font-size: 16px; color: var(--text-bright); }
.steps p { margin: 0; font-size: 14.5px; color: var(--dim); }

/* faq */

.faq { max-width: 760px; }

.faq details {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.faq summary {
  cursor: pointer;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text-bright);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+ "; color: var(--accent); }
.faq details[open] summary::before { content: "− "; }
.faq details p { margin: 12px 0 0; color: var(--dim); font-size: 14.5px; }

/* cta */

.cta { text-align: center; border-bottom: 0; }
.cta h2 { margin-bottom: 24px; }

/* ---------------------------------------------------------------- prose */

.prose { max-width: 760px; padding: 56px 0; }
.prose h1 { font-size: clamp(28px, 4vw, 38px); margin: 0 0 8px; color: var(--text-bright); letter-spacing: -.3px; }
.prose .updated { margin: 0 0 34px; color: var(--dim); font-size: 13.5px; }
.prose h2 { font-size: 21px; margin: 38px 0 12px; }
.prose h3 { font-size: 16.5px; margin: 26px 0 8px; color: var(--text-bright); }
.prose p, .prose li { color: var(--text); font-size: 15px; }
.prose ul { padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--text-bright); }

.callout {
  padding: 16px 18px;
  margin: 24px 0;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 7px 7px 0;
}
.callout p { margin: 0; font-size: 14.5px; }

/* ------------------------------------------------------------------ ads */

.ad-slot {
  max-width: var(--max);
  margin: 0 auto;
  padding: 26px 24px;
  min-height: 0;
  text-align: center;
}

.ad-slot ins { display: block; }

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

.site-footer {
  padding: 40px 0;
  color: var(--dim);
  font-size: 13.5px;
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 26px;
  align-items: center;
}

.site-footer nav { display: flex; gap: 20px; margin-left: auto; flex-wrap: wrap; }
.site-footer a { color: var(--dim); }
.site-footer a:hover { color: var(--text-bright); }

/* --------------------------------------------------------------- mobile */

@media (max-width: 720px) {
  .site-header .wrap { height: auto; padding-top: 12px; padding-bottom: 12px; flex-wrap: wrap; gap: 12px; }
  .site-nav { gap: 14px; font-size: 13.5px; width: 100%; margin-left: 0; }
  .hero { padding: 54px 0 44px; }
  .hero-inner { grid-template-columns: 1fr; gap: 32px; }
  .mock-body { grid-template-columns: 1fr; min-height: 0; }
  .mock-rail { display: none; }
  .mock-canvas { min-height: 200px; }
  section { padding: 48px 0; }
}