/* ============================================================
   WalkInside 3D — landing page styles
   Plain CSS, no framework. Dark, restrained, single accent.
   ============================================================ */

:root {
  --bg: #0a0a0b;
  --bg-soft: #101012;
  --surface: #141417;
  --surface-2: #1a1a1e;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text: #f4f1ec;
  --text-2: #b6b1a9;
  --muted: #8c8880;
  --accent: #d8a25e;
  --accent-soft: rgba(216, 162, 94, 0.12);
  --accent-line: rgba(216, 162, 94, 0.38);
  --radius: 14px;
  --radius-lg: 20px;
  --max: 1180px;
  --header-h: 76px;
  /* Latin first, then a fallback per script so every published locale gets a
     real typeface from the system rather than a boxed-glyph default. */
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial,
    "Noto Sans", "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei",
    "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", "Noto Sans KR", "Malgun Gothic",
    "Noto Sans Arabic", "Segoe UI Historic", "Noto Naskh Arabic", "Geeza Pro",
    "Noto Sans Hebrew", "Noto Sans Devanagari", "Nirmala UI", "Noto Sans Bengali",
    "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Gujarati", "Noto Sans Gurmukhi",
    "Noto Sans Kannada", "Noto Sans Malayalam", "Noto Sans Thai", "Noto Sans Myanmar",
    "Noto Sans Ethiopic", sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3, h4 { line-height: 1.16; letter-spacing: -0.02em; margin: 0; font-weight: 640; }

h2 { font-size: clamp(30px, 4vw, 44px); }
h3 { font-size: 20px; }

p { margin: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #14100a;
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
  z-index: 200;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

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

/* ---------- reusable bits ---------- */

.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}

.lead { color: var(--text-2); font-size: 18px; max-width: 62ch; }

.section { padding: 104px 0; border-top: 1px solid var(--line); }
.section--soft { background: var(--bg-soft); }
.section__head { max-width: 720px; margin-bottom: 52px; }
.section__head h2 + .lead, .section__head h2 + p { margin-top: 18px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease,
    color 0.2s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--accent); color: #16110a; }
.btn--primary:hover { background: #e6b273; }

.btn--ghost { border-color: var(--line-strong); color: var(--text); background: rgba(255,255,255,0.02); }
.btn--ghost:hover { border-color: var(--accent-line); background: var(--accent-soft); }

.btn--wa { background: #1f8b4c; color: #fff; }
.btn--wa:hover { background: #239a55; }

.btn svg { width: 18px; height: 18px; flex: 0 0 auto; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

.chip-list { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 26px 0 0; list-style: none; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.025);
  color: var(--text-2); font-size: 14.5px;
}
.chip svg { width: 15px; height: 15px; color: var(--accent); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
}

.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card h3 { margin-bottom: 10px; }
.card p { color: var(--text-2); font-size: 16px; }

.icon-badge {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  margin-bottom: 18px;
}
.icon-badge svg { width: 21px; height: 21px; }

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(10, 10, 11, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.site-header.is-stuck { border-bottom-color: var(--line); background: rgba(10, 10, 11, 0.9); }

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

.brand {
  display: inline-flex; align-items: center; gap: 11px;
  text-decoration: none; font-weight: 660; font-size: 17.5px;
  letter-spacing: -0.01em; flex: 0 0 auto;
}
.brand svg { width: 30px; height: 30px; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.nav a:not(.btn) {
  text-decoration: none; color: var(--text-2); font-size: 15.5px;
  padding: 9px 13px; border-radius: 8px; transition: color 0.15s ease, background 0.15s ease;
}
.nav a:not(.btn):hover { color: var(--text); background: rgba(255,255,255,0.05); }

.header-cta { margin-left: 8px; min-height: 44px; padding: 0 20px; font-size: 15.5px; }

.menu-btn {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line-strong);
  border-radius: 10px; color: var(--text); cursor: pointer;
}
.menu-btn svg { width: 20px; height: 20px; }

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

.hero { position: relative; overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,11,0.86) 0%, rgba(10,10,11,0.55) 38%, rgba(10,10,11,0.94) 100%),
    linear-gradient(90deg, rgba(10,10,11,0.82) 0%, rgba(10,10,11,0.25) 62%, rgba(10,10,11,0.6) 100%);
}
.hero__inner { position: relative; padding: 132px 0 110px; max-width: 800px; }
.hero h1 { font-size: clamp(38px, 5.4vw, 68px); letter-spacing: -0.03em; }
.hero .lead { margin-top: 22px; font-size: clamp(17px, 2vw, 20px); max-width: 60ch; }
.hero .btn-row { margin-top: 34px; }
.hero .chip-list { margin-top: 30px; }

/* ---------- demo ---------- */

.demo-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
.demo-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.demo-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.demo-frame__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,11,0.30), rgba(10,10,11,0.68));
}
.demo-frame__overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; text-align: center; padding: 24px;
}
.demo-frame__overlay p { color: var(--text-2); font-size: 15px; max-width: 46ch; }
.demo-play {
  width: 76px; height: 76px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--accent); color: #16110a;
  border: 0; cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease;
}
.demo-play:hover { transform: scale(1.06); background: #e6b273; }
.demo-play svg { width: 26px; height: 26px; margin-left: 3px; }

.demo-meta {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  margin-top: 18px; color: var(--muted); font-size: 14px;
}
.demo-meta a { color: var(--text-2); }

/* ---------- step list ---------- */

.steps { display: grid; gap: 18px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.step__n {
  font-size: 13px; font-weight: 700; letter-spacing: 0.12em;
  color: var(--accent); text-transform: uppercase; margin-bottom: 14px;
}
.step h3 { margin-bottom: 8px; font-size: 18.5px; }
.step p { color: var(--text-2); font-size: 15.5px; }

/* ---------- checklists ---------- */

.check { list-style: none; padding: 0; margin: 0; display: grid; gap: 13px; }
.check li { position: relative; padding-left: 32px; color: var(--text-2); }
.check li strong { color: var(--text); font-weight: 600; }
.check li::before {
  content: ""; position: absolute; left: 4px; top: 10px;
  width: 7px; height: 12px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(42deg);
}

/* ---------- recording guide ---------- */

.guide { display: grid; grid-template-columns: 1.05fr 1fr; gap: 22px; align-items: start; }
.guide__steps { counter-reset: g; list-style: none; margin: 0; padding: 0; }
.guide__steps li {
  counter-increment: g; position: relative;
  padding: 12px 0 12px 46px;
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
}
.guide__steps li:last-child { border-bottom: 0; }
.guide__steps li::before {
  content: counter(g);
  position: absolute; left: 0; top: 11px;
  width: 28px; height: 28px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  color: var(--accent); font-size: 13.5px; font-weight: 700;
}
.guide__note {
  margin-top: 18px; padding: 16px 18px;
  border-radius: 10px; border: 1px solid var(--accent-line);
  background: var(--accent-soft); color: var(--text);
  font-weight: 600; font-size: 15.5px;
}

/* ---------- record tips ---------- */

.tips { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tip { border-left: 2px solid var(--accent-line); padding: 4px 0 4px 20px; }
.tip h3 { font-size: 17.5px; margin-bottom: 8px; }
.tip p { color: var(--text-2); font-size: 15.5px; }
.tip ul { margin: 10px 0 0; padding-left: 18px; color: var(--text-2); font-size: 15.5px; }
.tip li { margin-bottom: 4px; }

.flow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 14px; font-size: 14px; color: var(--accent);
}
.flow span {
  padding: 5px 11px; border: 1px solid var(--accent-line);
  border-radius: 6px; background: var(--accent-soft); white-space: nowrap;
}

/* ---------- sample block ---------- */

.sample {
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 34px;
  align-items: center;
  background: linear-gradient(140deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 40px;
}

/* ---------- agency ---------- */

.agency__tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; padding: 0; list-style: none; }
.agency__tags li {
  font-size: 14px; color: var(--muted);
  padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255,255,255,0.02);
}

/* ---------- contact ---------- */

.contact { text-align: center; }
.contact h2 { max-width: 22ch; margin: 0 auto; }
.contact .lead { margin: 20px auto 0; }
.contact .btn-row { justify-content: center; margin-top: 34px; }

.contact-details {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 40px;
  margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line);
}
.contact-details a { text-decoration: none; color: var(--text-2); }
.contact-details a:hover { color: var(--accent); }
.contact-details div { display: flex; flex-direction: column; gap: 4px; }
.contact-details dt {
  font-size: 12.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted);
}

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

.site-footer { border-top: 1px solid var(--line); padding: 46px 0 54px; color: var(--muted); font-size: 14.5px; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 18px 30px; align-items: center; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 18px; margin-left: auto; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--text); }
.site-footer .fine { width: 100%; max-width: 92ch; line-height: 1.6; }

/* ---------- floating whatsapp ---------- */

.wa-float {
  position: fixed;
  right: 22px;
  bottom: max(22px, calc(env(safe-area-inset-bottom) + 22px));
  z-index: 90;
  display: inline-flex; align-items: center; gap: 9px;
  height: 52px; padding: 0 20px 0 16px;
  border-radius: 999px;
  background: #1f8b4c; color: #fff;
  text-decoration: none; font-weight: 600; font-size: 15px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  transition: transform 0.16s ease, background 0.16s ease;
}
.wa-float:hover { transform: translateY(-2px); background: #239a55; }
.wa-float svg { width: 22px; height: 22px; }

/* ---------- privacy page ---------- */

.doc { padding: 64px 0 96px; max-width: 74ch; }
.doc h1 { font-size: clamp(32px, 4.6vw, 46px); margin-bottom: 12px; }
.doc h2 { font-size: 22px; margin: 44px 0 12px; }
.doc p, .doc li { color: var(--text-2); }
.doc ul { padding-left: 20px; }
.doc a { color: var(--accent); }
.doc .updated { color: var(--muted); font-size: 14.5px; }

/* ---------- responsive ---------- */

@media (max-width: 1024px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide { grid-template-columns: 1fr; }
  .sample { grid-template-columns: 1fr; padding: 32px; }
}

@media (max-width: 860px) {
  :root { --header-h: 64px; }
  body { font-size: 16.5px; }
  .section { padding: 76px 0; }
  .nav, .header-cta { display: none; }
  .menu-btn { display: inline-flex; }
  .grid--3, .grid--2, .tips { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .hero__inner { padding: 84px 0 72px; }
  .demo-frame { aspect-ratio: 4 / 3; border-radius: var(--radius); }
  .wa-float span { display: none; }
  .wa-float { width: 54px; height: 54px; padding: 0; justify-content: center; right: 18px; }
  .contact-details { flex-direction: column; gap: 20px; align-items: center; }

  /* mobile nav drawer */
  .nav.is-open {
    display: flex;
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 16px 24px 24px;
    background: rgba(12, 12, 14, 0.98);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
  }
  .nav.is-open a:not(.btn) { padding: 14px 12px; font-size: 17px; }
  .nav.is-open .header-cta { display: inline-flex; margin: 10px 0 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* ============================================================
   Language picker + localised layout
   ============================================================ */

.lang { position: relative; flex: 0 0 auto; }

.lang > summary {
  display: inline-flex; align-items: center; gap: 7px;
  height: 44px; padding: 0 13px;
  border: 1px solid var(--line-strong); border-radius: 10px;
  color: var(--text-2); font-size: 14.5px; font-weight: 550;
  cursor: pointer; list-style: none; white-space: nowrap;
}
.lang > summary::-webkit-details-marker { display: none; }
.lang > summary::marker { content: ""; }
.lang > summary:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.lang[open] > summary { color: var(--text); background: rgba(255, 255, 255, 0.07); }
.lang > summary svg { width: 17px; height: 17px; flex: 0 0 auto; }
.lang__cur { max-width: 13ch; overflow: hidden; text-overflow: ellipsis; }

.lang__panel {
  position: absolute; z-index: 120;
  top: calc(100% + 8px); right: 0;
  width: min(580px, calc(100vw - 32px));
  max-height: min(64vh, 520px); overflow: auto;
  padding: 10px;
  background: rgba(14, 14, 16, 0.98);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.lang__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px;
}
.lang__list a {
  display: block; padding: 8px 11px; border-radius: 8px;
  text-decoration: none; color: var(--text-2); font-size: 14.5px;
}
.lang__list a:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); }
.lang__list a.is-current { color: var(--accent); background: var(--accent-soft); font-weight: 600; }

.lang-footer-wrap { width: 100%; }
.site-footer .lang-footer {
  display: flex; flex-wrap: wrap; gap: 7px 16px;
  margin: 4px 0 0; padding-top: 18px;
  border-top: 1px solid var(--line);
}
.site-footer .lang-footer a { color: var(--muted); font-size: 13px; text-decoration: none; }
.site-footer .lang-footer a:hover { color: var(--text); }
.site-footer .lang-footer a[aria-current="true"] { color: var(--accent); }

@media (max-width: 860px) {
  .lang { order: 1; margin-inline-start: auto; }
  .menu-btn { order: 2; margin-inline-start: 10px; margin-left: 0; }
}

@media (max-width: 560px) {
  .lang__list { grid-template-columns: 1fr; }
  .lang__cur { max-width: 9ch; }
}

/* ---------- right-to-left ---------- */
/* Every physical direction the layout relies on, mirrored. */

[dir="rtl"] .skip-link { left: auto; right: -9999px; border-radius: 0 0 0 8px; }
[dir="rtl"] .skip-link:focus { left: auto; right: 0; }
[dir="rtl"] .nav { margin-left: 0; margin-right: auto; }
[dir="rtl"] .header-cta { margin-left: 0; margin-right: 8px; }
[dir="rtl"] .menu-btn { margin-left: 0; margin-right: auto; }
[dir="rtl"] .lang > summary { direction: rtl; }
[dir="rtl"] .lang__panel { right: auto; left: 0; }
[dir="rtl"] .demo-play svg { margin-left: 0; margin-right: 3px; }
[dir="rtl"] .check li { padding-left: 0; padding-right: 32px; }
[dir="rtl"] .check li::before { left: auto; right: 4px; }
[dir="rtl"] .guide__steps li { padding: 12px 46px 12px 0; }
[dir="rtl"] .guide__steps li::before { left: auto; right: 0; }
[dir="rtl"] .tip { border-left: 0; border-right: 2px solid var(--accent-line); padding: 4px 20px 4px 0; }
[dir="rtl"] .tip ul { padding-left: 0; padding-right: 18px; }
[dir="rtl"] .site-footer nav { margin-left: 0; margin-right: auto; }
[dir="rtl"] .site-footer .lang-footer { margin-left: 0; margin-right: 0; }
[dir="rtl"] .wa-float { right: auto; left: 22px; }
[dir="rtl"] .doc ul { padding-left: 0; padding-right: 20px; }
[dir="rtl"] .hero__media::after {
  background:
    linear-gradient(180deg, rgba(10,10,11,0.86) 0%, rgba(10,10,11,0.55) 38%, rgba(10,10,11,0.94) 100%),
    linear-gradient(270deg, rgba(10,10,11,0.82) 0%, rgba(10,10,11,0.25) 62%, rgba(10,10,11,0.6) 100%);
}

/* ---------- translated text needs a little more room than English ---------- */

.btn { white-space: normal; text-align: center; }
h1, h2, h3, h4, .lead, .check li, .tip p { overflow-wrap: break-word; }
:lang(ja), :lang(ko), :lang(zh-Hans), :lang(zh-Hant) { line-height: 1.75; }
:lang(ar), :lang(fa), :lang(ur), :lang(he) { line-height: 1.8; }
:lang(th) { line-height: 1.85; }