/* landing.css — halaman pemasaran (root "/").

   Bahasa visual mengikuti referensi: kertas dengan grain halus, headline
   display besar yang memuat glif bentuk di dalam kalimatnya, blok warna
   primer jenuh sebagai bentuk besar (bukan sebagai teks atau border), potret
   di dalam lingkaran warna, dan pil pertanyaan kuning.

   Aturan yang menjaga halaman ini tidak jadi template:
   - Primer jenuh HANYA pada bentuk berukuran besar. Untuk teks, dipakai
     varian gelap/terang dari hue yang sama yang lolos kontras 4.5:1.
   - Satu keluarga huruf untuk teks, satu untuk display. Tidak ada label
     uppercase kecil bertaburan.
   - Tidak ada bayangan pada elemen diam; kedalaman datang dari bidang warna.
   - Skala huruf dijaga sembilan langkah: 13/14/15/16/17/20/34/40/68.
   - Semua ukuran teks >= 13px; tidak ada teks yang harus dibaca di bawah itu. */

/* ---------- Kerangka ---------- */
.landing {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--paper-ink);
  position: relative;
  isolation: isolate;
  /* Bentuk dekoratif memang keluar tepi; `clip` memotongnya tanpa membuat
     scroll container sehingga nav sticky tetap bekerja. */
  overflow-x: clip;
}
/* Grain: satu tile 200x200, diulang. Di ::before agar tidak menutupi konten. */
.landing::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--landing-grain);
  background-repeat: repeat;
  opacity: var(--grain-opacity);
}
.l-main {
  flex: 1;
  width: 100%;
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 0 40px;
}
/* Nav dan footer memakai kolom yang sama dengan isi: satu pasang margin. */
.landing .container {
  max-width: var(--page-max-width);
  padding: 0 40px;
}

/* ---------- Tipografi bersama ---------- */
.l-sec-head { max-width: 60ch; margin-bottom: 32px; }
.l-sec-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.08;
  color: var(--paper-ink);
}
.l-sec-lede {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--paper-body);
  max-width: 58ch;
}
.l-sec-lede em { font-style: normal; color: var(--paper-ink); font-weight: 600; }

/* ---------- Hero ---------- */
.l-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: 48px;
  align-items: center;
  padding: 64px 0 104px;
}
.l-hero-copy { min-width: 0; }

.l-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(40px, 5.4vw, 68px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--paper-ink);
  padding-bottom: 6px;
  text-wrap: balance;
}
/* Glif di dalam kalimat. Ukuran `em` = selalu sebanding dengan headline,
   termasuk saat headline mengecil di layar sempit. */
.l-gl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.8em;
  height: 0.8em;
  margin: 0 0.04em;
  vertical-align: -0.04em;
  color: var(--p-green);
}
.l-gl svg { width: 100%; height: 100%; display: block; }

.l-lede {
  margin: 22px 0 0;
  max-width: 44ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--paper-body);
}
.l-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.l-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 24px;
  background: var(--paper-ink);
  color: var(--paper);
  border-radius: 6px;
  font-size: 16px;
  font-weight: 650;
  text-decoration: none;
  transition: background 160ms var(--motion-ease), transform 160ms var(--motion-ease);
}
.l-cta:hover { background: var(--p-orange); color: #fff; transform: translateY(-1px); }
.l-cta:focus-visible { outline: 3px solid var(--p-blue); outline-offset: 3px; }
.l-text-link {
  font-size: 16px;
  font-weight: 600;
  color: var(--paper-ink);
  text-decoration: none;
  border-bottom: 2px solid var(--paper-line);
  padding-bottom: 3px;
  transition: border-color 160ms var(--motion-ease);
}
.l-text-link:hover { border-bottom-color: var(--p-orange); }
.l-text-link:focus-visible { outline: 3px solid var(--p-blue); outline-offset: 3px; }

/* Tiga langkah: penanda bentuk, bukan angka urut dekoratif. */
.l-steps {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
  max-width: 42ch;
}
.l-steps li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--paper-body);
}
.l-steps b { color: var(--paper-ink); font-weight: 700; }
.l-step-m { flex: none; width: 15px; height: 15px; margin-top: 3px; }
.l-step-a { background: var(--p-green); border-radius: 50%; }
.l-step-b { background: var(--p-orange); }
.l-step-c {
  background: transparent;
  border: 3px solid var(--p-purple);
  border-radius: 50%;
}

/* ---------- Hero art ---------- */
.l-hero-art {
  position: relative;
  min-height: 430px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.l-art-portrait {
  position: relative;
  width: min(340px, 74%);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--p-green);
  z-index: 2;
}
.l-art-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  filter: saturate(0.95);
}
.l-art-orbit {
  position: absolute;
  right: -14%;
  top: 46%;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: var(--p-orange);
  z-index: 1;
}
.l-art-arrow {
  position: absolute;
  right: 2%;
  top: 54%;
  width: 96px;
  color: var(--paper);
  z-index: 3;
}
.l-art-arrow svg { width: 100%; height: auto; display: block; }
.l-art-ask {
  position: absolute;
  top: 3%;
  left: -3%;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 250px;
  padding: 13px 18px;
  background: var(--p-yellow);
  color: #241A04;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.35;
}
.l-art-ask-mark {
  flex: none;
  width: 20px;
  height: 3px;
  border-radius: 2px;
  background: #241A04;
}
.l-art-tri {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
}
.l-art-tri-a {
  top: -16px;
  right: 14%;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 48px solid var(--p-purple);
}
.l-art-tri-b {
  bottom: -6px;
  left: 4%;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-top: 42px solid var(--p-blue);
}

/* ---------- Gerbang izin ---------- */
.l-gate { padding: 24px 0 88px; scroll-margin-top: 84px; }
/* Target anchor: nav menempel di atas, jadi setiap bagian yang bisa dituju
   `#...` butuh jarak gulir sendiri. Tanpa ini judul bagian mendarat tepat di
   bawah nav dan tertutup. */
.l-hero, .l-flow-sec, .l-proof-sec, .l-ws, .l-feats { scroll-margin-top: 76px; }
.l-gate-panel {
  border-radius: 12px;
  background: var(--paper-2);
  overflow: hidden;
}
.l-gate-tabs {
  display: flex;
  gap: 6px;
  padding: 8px 8px 0;
}
.l-tab {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px 16px;
  border: 0;
  border-radius: 8px 8px 0 0;
  background: transparent;
  color: var(--paper-muted);
  font-family: var(--font-ui);
  text-align: left;
  cursor: pointer;
  transition: background 160ms var(--motion-ease), color 160ms var(--motion-ease);
}
.l-tab:hover { background: var(--paper); color: var(--paper-ink); }
.l-tab-name { font-size: 14px; font-weight: 650; }
.l-tab-num { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--paper-muted); }
.l-tab[aria-selected="true"] {
  background: var(--paper-ink);
  color: var(--paper);
}
.l-tab[aria-selected="true"] .l-tab-num { color: var(--paper); opacity: 0.78; }
.l-tab:focus-visible { outline: 3px solid var(--p-blue); outline-offset: -3px; }

.l-gate-body { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; padding: 26px 26px 28px; }
.l-gate-body:focus-visible { outline: 3px solid var(--p-blue); outline-offset: -3px; }
.l-gate-meta {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.l-meta-person { display: flex; align-items: center; gap: 11px; min-width: 0; }
.l-meta-av {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 20%;
  flex: none;
  background: var(--paper);
}
.l-meta-row { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.l-meta-k { font-size: 13px; font-weight: 600; color: var(--paper-muted); }
.l-meta-v {
  font-size: 16px;
  font-weight: 650;
  line-height: 1.4;
  color: var(--paper-ink);
  overflow-wrap: anywhere;
}
.l-meta-blocked { gap: 5px; }
.l-meta-x { font-size: 14px; line-height: 1.45; color: var(--paper-body); overflow-wrap: anywhere; }
.l-meta-note { font-size: 13px; line-height: 1.5; color: var(--paper-muted); overflow-wrap: anywhere; }

.l-gate-answer { min-width: 0; }
.l-quote {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 650;
  color: var(--paper-muted);
}
.l-quote::before { content: "\201C"; }
.l-quote::after { content: "\201D"; }
.l-reply-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--paper-ink);
  overflow-wrap: anywhere;
}
.l-cite {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 20px;
  padding: 13px 16px;
  border-left: 4px solid var(--p-blue);
  border-radius: 0 8px 8px 0;
  background: var(--paper);
  max-width: 560px;
}
.l-cite b { font-size: 14px; font-weight: 700; color: var(--p-blue-text); }
.l-cite-date { font-size: 13px; color: var(--paper-muted); font-variant-numeric: tabular-nums; }
.l-cite-excerpt { font-size: 14px; line-height: 1.5; color: var(--paper-body); }
.l-badge {
  display: inline-block;
  margin-top: 18px;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--paper);
  font-size: 13px;
  font-weight: 650;
  color: var(--paper-muted);
}
.l-badge[data-tone="ok"] { color: var(--p-green-text); }

/* ---------- Tiga penanya ---------- */
.l-flow-sec { padding: 0 0 80px; }
.l-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}
.l-flow-row { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.l-flow-av {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 16%;
  margin-bottom: 18px;
  background: var(--paper-2);
}
.l-flow-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  font-size: 16px;
  font-weight: 650;
  color: var(--paper-ink);
}
.l-flow-name { min-width: 0; }
.l-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--paper-muted); }
.l-flow-num {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--paper-ink);
  font-variant-numeric: tabular-nums;
}
.l-flow-unit { margin-top: 6px; font-size: 14px; color: var(--paper-muted); }
.l-flow-bar { display: flex; gap: 3px; margin-top: 14px; flex-wrap: wrap; }
.l-flow-dot { width: 10px; height: 10px; border-radius: 2px; background: var(--p-green); }
.l-flow-dot.blocked { background: transparent; border: 2px solid var(--paper-line); }
.l-flow-note { margin: 20px 0 0; font-size: 14px; line-height: 1.55; color: var(--paper-muted); }

/* ---------- Keadaan sistem ---------- */
.l-proof-sec { padding: 0 0 80px; }
.l-proof-title {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--paper-ink);
}
.l-proof {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  margin: 0;
  padding: 26px 24px;
  border-radius: 12px;
  background: var(--paper-2);
}
.l-proof dt {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--paper-ink);
  font-variant-numeric: tabular-nums;
}
.l-proof dd { margin: 8px 0 0; font-size: 14px; color: var(--paper-muted); }
.l-proof-note { margin: 14px 0 0; font-size: 14px; color: var(--paper-muted); }
.l-proof-note code { font-family: var(--font-ui); color: var(--paper-ink); }

/* ---------- Pratinjau workspace ---------- */
.l-ws {
  /* Kartu ini adalah jendela ke aplikasi yang selalu gelap. Semua token yang
     dipakai komponen chat harus didefinisikan ulang di sini, termasuk alias
     (--text-1/2/3, --text-secondary, --border), karena alias di tokens.css
     hidup di level :root dan akan mengikuti tema halaman bila tidak ditimpa. */
  --bg: #18191B;
  --side: #1F2022;
  --surface: #222325;
  --surface2: #252628;
  --surface3: #2B2C2F;
  --bg-hover: #2B2C2F;
  --surface-hover: #2B2C2F;
  --line: #303134;
  --line-strong: #3A3B3E;
  --border: #303134;
  --border-subtle: #303134;
  --border-strong: #3A3B3E;
  --ink: #E6E7E9;
  --muted: #A4A6AA;
  --faint: #8C8F95;
  --text-1: #E6E7E9;
  --text-2: #A4A6AA;
  --text-3: #8C8F95;
  --text-primary: #E6E7E9;
  --text-secondary: #A4A6AA;
  --accent: #2589E8;
  --accent-text: #5EA9F4;
  --accent-hi: #3999F2;
  --accent-fill: #1E74C8;
  --accent-ink: #FFFFFF;
  --topbar: #202123;
  --bubble-user: #292A2D;
  --bubble-assistant: #252628;
  --ok: #35B789;
  --warn: #E0A23D;
  --danger: #E25C5C;

  color: var(--ink);
  background: var(--surface);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 80px;
}
.l-ws-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  font-size: 14px;
  color: var(--muted);
  background: var(--topbar);
}
.l-ws-head .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }
.l-ws-open {
  margin-left: auto;
  font-size: 14px;
  font-weight: 650;
  color: var(--accent-text);
  text-decoration: none;
}
.l-ws-open:hover { text-decoration: underline; text-underline-offset: 0.22em; }
.l-ws-body { padding: 24px 22px 10px; display: grid; gap: 20px; }
.l-ws-sug {
  display: grid;
  gap: 2px;
  margin-top: 6px;
  padding-top: 6px;
}
.l-ws-sug-title { font-size: 13px; color: var(--faint); padding: 8px 0; }
.l-ws-sug .sug {
  border-bottom: 0;
  border-radius: 8px;
  padding: 11px 14px;
  color: var(--muted);
}
.l-ws-dummy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 22px 22px;
  padding: 14px 17px;
  background: var(--surface2);
  border-radius: 12px;
  font-size: 16px;
  color: var(--faint);
  text-decoration: none;
  transition: background 160ms var(--motion-ease);
}
.l-ws-dummy:hover { background: var(--surface3); }
.l-ws-dummy > span:last-child {
  padding: 7px 15px;
  border-radius: 7px;
  background: var(--accent-fill);
  color: var(--accent-ink);
  font-weight: 650;
  font-size: 14px;
}

/* ---------- Apa yang membuat jawaban bisa diperiksa ---------- */
.l-feats { padding: 0 0 96px; }
.l-feat-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin-top: 32px;
}
.l-feat { min-width: 0; }
.l-feat-mark { display: block; width: 28px; height: 28px; margin-bottom: 16px; }
.l-fm-a { background: var(--p-green); border-radius: 50% 0 50% 50%; }
.l-fm-b { background: var(--p-orange); border-radius: 50%; }
.l-fm-c {
  background: transparent;
  border: 5px solid var(--p-purple);
  border-radius: 50%;
}
.l-feat h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--paper-ink);
}
.l-feat p { margin: 0; font-size: 16px; line-height: 1.62; color: var(--paper-body); }

/* ---------- Motion layer ----------
   Hanya jalan bila pengguna tidak meminta minim gerak. Keadaan awal yang
   tersembunyi hidup DI DALAM media query ini, jadi halaman versi
   reduced-motion adalah halaman yang sudah jadi. */
@media (prefers-reduced-motion: no-preference) {
  /* Keadaan awal dikunci pada `.rv` — kelas yang SAMA dengan yang diamati
     `reveal.js`. Kalau penandaan itu gagal (JS mati, elemen dirender ulang),
     tidak ada yang bisa tertinggal tersembunyi: tanpa `.rv` elemen tetap
     terlihat. */
  .l-steps li.rv,
  .l-gate-panel.rv,
  .l-flow-row.rv,
  .l-proof.rv,
  .l-feat.rv {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 520ms var(--motion-ease), transform 520ms var(--motion-ease);
  }
  .l-steps li:nth-child(2) { transition-delay: 70ms; }
  .l-steps li:nth-child(3) { transition-delay: 140ms; }
  .l-flow-row:nth-child(2) { transition-delay: 90ms; }
  .l-flow-row:nth-child(3) { transition-delay: 180ms; }
  .l-feat:nth-child(2) { transition-delay: 90ms; }
  .l-feat:nth-child(3) { transition-delay: 180ms; }
  .l-steps li.rv.is-in,
  .l-gate-panel.rv.is-in,
  .l-flow-row.rv.is-in,
  .l-proof.rv.is-in,
  .l-feat.rv.is-in {
    opacity: 1;
    transform: none;
  }
  /* Satu gambar yang bergerak pelan: potret hero bernapas. */
  .l-art-portrait img {
    animation: l-drift 26s ease-in-out infinite alternate;
  }
  @keyframes l-drift {
    from { transform: scale(1); }
    to { transform: scale(1.06) translateY(-1.5%); }
  }
}

/* ---------- Responsif ---------- */
@media (max-width: 1024px) {
  .l-hero { grid-template-columns: 1fr; gap: 44px; padding: 48px 0 72px; }
  .l-hero-art { min-height: 380px; max-width: 470px; width: 100%; margin: 0 auto; }
  .l-gate-body { grid-template-columns: 1fr; gap: 22px; }
  .l-gate-meta { flex-direction: row; flex-wrap: wrap; gap: 16px 32px; }
  .l-meta-blocked { flex-basis: 100%; }
  .l-flow { grid-template-columns: 1fr; gap: 28px; }
  .l-flow-av { width: 112px; height: 112px; margin-bottom: 12px; }
  .l-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .l-feat-list { grid-template-columns: 1fr; gap: 28px; }
}
/* ---------- Nav di layar sempit ----------
   Nav landing harus tetap SATU baris. Tanpa aturan ini `.links` membungkus
   tombol ke baris kedua dan nav sticky tumbuh 56 -> 106px, memakan hampir
   seperempat layar 390px, dan judul bagian yang dituju anchor ikut tertutup.
   Urutan media query menurun (720 -> 480 -> 400 -> 370) supaya aturan yang
   lebih sempit benar-benar menang. */
@media (max-width: 720px) {
  .landing nav.site-nav .links { flex-wrap: nowrap; gap: 10px; }
  .landing .nav-logo { flex: none; min-width: 0; gap: 8px; font-size: 15px; }
  .landing .nav-logo .mark { width: 26px; height: 26px; }
  .landing .nav-logo .brandtext span { font-size: 12px; margin-left: 4px; }
  .landing .nav-right { flex: none; gap: 8px; }
  .landing .nav-cta {
    padding: 8px 10px;
    font-size: 13px;
    white-space: nowrap;
    flex: none;
  }

  .l-main { padding: 0 20px; }
  .landing .container { padding: 0 20px; }
  .l-hero { padding: 36px 0 48px; }
  .l-title { font-size: clamp(34px, 9.5vw, 44px); }
  .l-lede { font-size: 15px; }
  .l-hero-art { min-height: 300px; }
  .l-art-orbit { width: 148px; height: 148px; right: 0; }
  .l-art-ask { left: 0; top: 0; max-width: 200px; font-size: 13px; padding: 10px 13px; }
  .l-art-arrow { width: 64px; right: 6%; }
  .l-art-tri-a { border-left-width: 20px; border-right-width: 20px; border-bottom-width: 34px; }
  .l-art-tri-b { border-left-width: 18px; border-right-width: 18px; border-top-width: 30px; }
  .l-gate-tabs { padding: 6px 6px 0; gap: 4px; }
  .l-tab { padding: 10px 11px; flex-direction: column; gap: 2px; }
  .l-tab-name { font-size: 13px; }
  .l-gate-body { padding: 18px 16px 22px; }
  .l-reply-text { font-size: 16px; }
  .l-proof { grid-template-columns: 1fr; gap: 0; padding: 18px 20px; }
  .l-proof > div { padding: 14px 0; }
  .l-proof > div + div { border-top: 2px solid var(--paper-line); }
  .l-ws-body { padding: 18px 16px 8px; }
  .l-ws-dummy { margin: 14px 16px 18px; }
  .l-feats { padding-bottom: 64px; }
}
@media (max-width: 480px) {
  /* Ruang menyusut: yang mengecil adalah ukuran kontrol dan jarak, bukan teks
     yang dibaca. */
  .landing nav.site-nav .links { padding: 8px 14px; gap: 8px; }
  .landing .nav-right { gap: 7px; }
  .landing .theme-btn,
  .landing .nav-toggle { width: 32px; height: 32px; }
  .landing .nav-cta { padding: 7px 10px; }
  /* Panah CTA hanya penanda arah (aria-hidden). Di layar ini ia yang dilepas
     lebih dulu supaya label tombol tetap utuh. */
  .landing .nav-cta span[aria-hidden="true"] { display: none; }
}
@media (max-width: 400px) {
  .landing nav.site-nav .links { padding: 8px 12px; gap: 7px; }
  .landing .nav-logo { gap: 7px; font-size: 14px; }
  .landing .nav-logo .mark { width: 24px; height: 24px; }
  .landing .nav-right { gap: 6px; }
  .landing .theme-btn,
  .landing .nav-toggle { width: 30px; height: 30px; }
  .landing .nav-cta { padding: 7px 9px; }
}
@media (max-width: 370px) {
  /* Di bawah 370px ruang tidak cukup untuk merek penuh + tiga kontrol. Yang
     dilepas hanya sufiks "SafeDesk" (masih ada di judul halaman dan di tombol
     CTA). Semua kontrol tetap ada. */
  .landing .nav-logo .brandtext span { display: none; }
}