/* ===================================================================
   FloatMute — landing site styles
   Self-contained: webfonts + design tokens + page theme + components.
   Converted from the Latte design-system export to plain static CSS.
   =================================================================== */

/* ── Webfonts: Inter (OFL), the cuts bundled in the app ──────────── */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/Inter-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/Inter-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/Inter-SemiBold.ttf") format("truetype");
}

/* ── Design tokens (colors) ──────────────────────────────────────── */
:root {
  /* Desktop backdrop */
  --plum-700: rgb(74, 58, 142);
  --plum-800: rgb(44, 34, 86);
  --plum-900: rgb(26, 20, 55);
  --plum-950: rgb(20, 15, 36);

  /* Brand */
  --brand-orange: rgb(255, 182, 72);
  --brand-coral:  rgb(255, 122, 89);
  --brand-glow:   rgba(255, 138, 80, 0.45);

  /* Accent amber */
  --amber-500: rgb(255, 159, 10);
  --amber-200: rgb(255, 215, 154);
  --amber-tint-strong: rgba(255, 159, 10, 0.18);
  --amber-tint:        rgba(255, 159, 10, 0.16);
  --amber-glow:        rgba(255, 159, 10, 0.35);

  /* Status */
  --green-500: rgb(48, 209, 89);
  --green-glow: rgba(48, 209, 89, 0.45);
  --coral-400: rgb(255, 120, 120);
  --red-500: rgb(255, 69, 59);
  --red-tint: rgba(255, 69, 59, 0.16);

  /* Neutral surfaces */
  --ink-900: rgb(33, 33, 41);
  --menu-fill: rgba(33, 33, 41, 0.72);

  /* White-alpha ladder */
  --w-04: rgba(255, 255, 255, 0.04);
  --w-05: rgba(255, 255, 255, 0.05);
  --w-08: rgba(255, 255, 255, 0.08);
  --w-10: rgba(255, 255, 255, 0.10);
  --w-12: rgba(255, 255, 255, 0.12);
  --w-28: rgba(255, 255, 255, 0.28);
  --w-38: rgba(255, 255, 255, 0.38);
  --w-45: rgba(255, 255, 255, 0.45);
  --w-50: rgba(255, 255, 255, 0.50);
  --w-85: rgba(255, 255, 255, 0.85);
  --w-92: rgba(255, 255, 255, 0.92);
  --w-96: rgba(255, 255, 255, 0.96);

  /* Semantic aliases */
  --desktop-gradient: linear-gradient(180deg, var(--plum-700) 0%, var(--plum-800) 55%, var(--plum-900) 100%);
  --brand-gradient: linear-gradient(180deg, var(--brand-orange) 0%, var(--brand-coral) 100%);
  --shadow-menu: 0 18px 48px rgba(0, 0, 0, 0.45);

  /* Typography */
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fs-lg: 15px;
}

/* ── Page theme variables (dark default) ─────────────────────────── */
:root,
[data-theme="dark"] {
  --pg-bg: #0f0b18;
  --pg-bg-2: #161024;
  --pg-nav: rgba(15, 11, 24, 0.72);
  --pg-panel: rgba(255, 255, 255, 0.045);
  --pg-panel-2: rgba(255, 255, 255, 0.07);
  --pg-border: rgba(255, 255, 255, 0.11);
  --pg-border-soft: rgba(255, 255, 255, 0.07);
  --pg-text: rgba(255, 255, 255, 0.96);
  --pg-text-2: rgba(255, 255, 255, 0.62);
  --pg-text-3: rgba(255, 255, 255, 0.42);
  --pg-accent: #30d158;
  --pg-accent-ink: #06210f;
  --pg-coral: #ff7878;
  --pg-glow: radial-gradient(900px 540px at 78% -8%, rgba(120, 86, 210, 0.30), transparent 60%),
             radial-gradient(640px 420px at 6% 8%, rgba(255, 138, 80, 0.10), transparent 60%);
}

[data-theme="light"] {
  --pg-bg: #f4efe7;
  --pg-bg-2: #ece4d8;
  --pg-nav: rgba(244, 239, 231, 0.80);
  --pg-panel: #ffffff;
  --pg-panel-2: #fbf7f1;
  --pg-border: rgba(40, 24, 4, 0.13);
  --pg-border-soft: rgba(40, 24, 4, 0.08);
  --pg-text: #211405;
  --pg-text-2: rgba(33, 20, 5, 0.66);
  --pg-text-3: rgba(33, 20, 5, 0.44);
  --pg-accent: #1f9d4d;
  --pg-accent-ink: #ffffff;
  --pg-coral: #d8504d;
  --pg-glow: radial-gradient(900px 540px at 80% -10%, rgba(255, 160, 90, 0.22), transparent 60%),
             radial-gradient(620px 420px at 4% 6%, rgba(120, 86, 210, 0.10), transparent 60%);
}

/* ── Base ────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--pg-bg);
  color: var(--pg-text);
  font-family: var(--font-ui);
}
a { color: inherit; text-decoration: none; }
::selection { background: rgba(48, 209, 89, 0.30); }

/* ── Language switching (RU default, EN on toggle) ───────────────── */
[lang="en"] { display: none; }
[data-lang="en"] [lang="en"] { display: inline; }
[data-lang="en"] [lang="ru"] { display: none; }
[data-lang="ru"] [lang="en"] { display: none; }

/* ── Theme icon (moon in dark, sun in light) ─────────────────────── */
[data-ico="sun"] { display: none; }
[data-theme="light"] [data-ico="sun"] { display: inline; }
[data-theme="light"] [data-ico="moon"] { display: none; }

/* ── Language segmented control: active pill ─────────────────────── */
[data-lang="ru"] [data-langbtn="ru"],
[data-lang="en"] [data-langbtn="en"] {
  background: var(--pg-text) !important;
  color: var(--pg-bg) !important;
}

/* ── Motion ──────────────────────────────────────────────────────── */
@keyframes fmfloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

/* ===================================================================
   Components recreated from the Latte design system
   =================================================================== */

/* ── MicGlyph: three bars on a 24×24 grid, scaled via --mic-scale ─── */
.mic {
  position: relative;
  width: 24px;
  height: 24px;
  flex: none;
  color: #fff;                         /* bar color (currentColor)     */
  transform: scale(var(--mic-scale, 1));
}
.mic > i {
  position: absolute;
  display: block;
  background: currentColor;
}
.mic .b1 { left: 8px;    top: 3px;    width: 8px;   height: 12px;  border-radius: 4px; }
.mic .b2 { left: 10.8px; top: 15px;   width: 2.4px; height: 4px;   border-radius: 1px; }
.mic .b3 { left: 7.5px;  top: 18.8px; width: 9px;   height: 2.2px; border-radius: 1.1px; }
.mic .slash {
  left: 50%; top: 50%;
  width: 23.04px;                      /* 0.96 × 24                    */
  height: 2.3px;
  border-radius: 1.15px;
  background: var(--red-500);
  transform: translate(-50%, -50%) rotate(45deg);
  display: none;
}
.mic.muted { color: var(--red-500); }
.mic.muted .slash { display: block; }

/* ── FloatingWidget: glass circle + state ring + glyph ───────────── */
.fw {
  position: relative;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  width: var(--fw-size, 64px);
  height: var(--fw-size, 64px);
}
.fw[disabled] { cursor: default; }
.fw .fw-bg {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0.6;
}
.fw .fw-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--green-500);
  opacity: 0.65;
  transition: box-shadow 180ms ease, opacity 180ms ease;
}
.fw .fw-ico {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.fw.muted .fw-ring {
  box-shadow: inset 0 0 0 2px var(--red-500);
  opacity: 0.95;
}

/* ── HUD: transient glass card shown on toggle ───────────────────── */
.hud {
  width: 160px;
  height: 140px;                       /* 160 × 0.875                  */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 20px;
  background: rgba(33, 33, 41, 0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: inset 0 0 0 1px var(--w-08), var(--shadow-menu);
}
.hud .hud-caption {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--w-92);
}

/* ===================================================================
   Interaction helpers (replacing the export's style-hover attribute)
   =================================================================== */
.btn-primary { transition: filter 160ms ease, transform 160ms ease; }
.btn-primary:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn-secondary { transition: border-color 160ms ease; }
.btn-secondary:hover { border-color: var(--pg-text-3); }
.link-soft { transition: color 140ms ease; }
.link-soft:hover { color: var(--pg-text); }

/* ── Hero demo scene: status text + widget driven by data-muted ──── */
[data-muted="true"]  [data-st="on"]  { display: none; }
[data-muted="false"] [data-st="off"] { display: none; }
.hero-scene[data-muted="true"] .fw .fw-ring {
  box-shadow: inset 0 0 0 2px var(--red-500);
  opacity: 0.95;
}
.hero-scene[data-muted="true"] .fw .mic { color: var(--red-500); }
.hero-scene[data-muted="true"] .fw .mic .slash { display: block; }

/* ── Document pages (Privacy / Terms / Support) ──────────────────── */
.doc h2 {
  margin: 38px 0 10px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--pg-text);
}
.doc p {
  margin: 0 0 14px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--pg-text-2);
}
.doc li {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--pg-text-2);
  margin-bottom: 7px;
}
.doc ul { margin: 0 0 14px; padding-left: 22px; }
.doc strong { color: var(--pg-text); font-weight: 600; }

/* ── Real app screenshots (Screens section) ──────────────────────── */
.shot-figure { margin: 0; }
.shot-figure figcaption {
  margin-top: 14px;
  font-size: 13px;
  color: var(--pg-text-3);
  text-align: center;
}
img.shot {
  display: none;                       /* shown per language below          */
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.40), inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
[data-lang="ru"] img.shot[lang="ru"] { display: block; }
[data-lang="en"] img.shot[lang="en"] { display: block; }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .nav-links { display: none !important; }
  .hero-grid { grid-template-columns: 1fr !important; }
  .nav-cta { display: none !important; }
  .screens-2col { grid-template-columns: 1fr !important; }
}