/* ==========================================================================
   Farzand Boshqaruvi -- marketing/landing site
   Design language deliberately mirrors the parent-app's Material3 rebuild
   (see parent-app/app/.../ui/theme/Color.kt) -- same indigo/teal brand hues,
   same semantic success/warning/danger colors -- so the web presence and the
   product itself read as one brand instead of two unrelated visual styles.
   ========================================================================== */

:root {
  /* Brand -- lifted 1:1 from the app's Primary40/Tertiary40 etc. */
  --color-primary: #4338CA;
  --color-primary-dark: #211D82;
  --color-primary-light: #6D5FE8;
  --color-tertiary: #0C6B69;
  --color-tertiary-light: #14928F;

  --color-success: #1E7A3D;
  --color-warning: #8A5300;
  --color-danger: #BA1A1A;

  --color-bg: #FCFCFF;
  --color-bg-alt: #F3F0F8;
  --color-surface: #FFFFFF;
  --color-surface-2: #F6F3FA;
  --color-border: #E3E1EC;
  --color-text: #1A1B20;
  --color-text-muted: #56565F;

  --shadow-sm: 0 1px 2px rgba(20, 17, 60, 0.06), 0 1px 3px rgba(20, 17, 60, 0.08);
  --shadow-md: 0 4px 12px rgba(20, 17, 60, 0.08), 0 2px 4px rgba(20, 17, 60, 0.06);
  --shadow-lg: 0 20px 40px -12px rgba(20, 17, 60, 0.25);

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --container: 1160px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #C2BFFF;
    --color-primary-dark: #8B7FFF;
    --color-primary-light: #DAD7FF;
    --color-tertiary: #4DDBD5;
    --color-tertiary-light: #8CF0EC;

    --color-success: #8CDA9D;
    --color-warning: #FFB95C;
    --color-danger: #FFB4AB;

    --color-bg: #111318;
    --color-bg-alt: #16181D;
    --color-surface: #1A1B20;
    --color-surface-2: #1E1F25;
    --color-border: #2E3036;
    --color-text: #E4E2E9;
    --color-text-muted: #A6A4AE;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, 0.55);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }

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

/* ---------- Typography ---------- */
h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; }
h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 1.6vw, 1.35rem); }
p { margin: 0; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
}
.lede {
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  color: var(--color-text-muted);
  max-width: 620px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 700;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: linear-gradient(135deg, var(--color-primary), var(--color-tertiary));
  color: #fff;
  box-shadow: var(--shadow-md);
}
.btn-primary:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.btn-outline {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text);
}
.btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn-block { width: 100%; }
.btn-sm { padding: 10px 18px; font-size: 0.9rem; }

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  background: color-mix(in srgb, var(--color-bg) 78%, transparent);
  border-bottom: 1px solid var(--color-border);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.05rem;
  text-decoration: none;
  color: var(--color-text);
}
.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-tertiary));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.brand-mark svg { width: 19px; height: 19px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  text-decoration: none;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--color-text-muted);
  transition: color 0.15s ease;
}
.nav-links a:hover { color: var(--color-text); }
.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav-toggle svg { width: 20px; height: 20px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 88px 0 60px;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 640px;
  background:
    radial-gradient(500px 320px at 15% 15%, color-mix(in srgb, var(--color-primary) 22%, transparent), transparent 70%),
    radial-gradient(480px 320px at 85% 10%, color-mix(in srgb, var(--color-tertiary) 20%, transparent), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.hero-copy > * + * { margin-top: 20px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 34px;
}
.hero-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--color-text-muted);
  font-weight: 600;
}
.hero-trust-item svg { width: 16px; height: 16px; color: var(--color-success); flex-shrink: 0; }

/* ---------- Phone mockup (pure CSS, mirrors the real app UI) ---------- */
.phone-wrap { display: flex; justify-content: center; }
.phone {
  width: 300px;
  height: 620px;
  border-radius: 42px;
  background: linear-gradient(160deg, #16171D, #0A0A0D);
  padding: 14px;
  box-shadow: var(--shadow-lg);
  position: relative;
  animation: float 6s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(-1.2deg); }
  50% { transform: translateY(-14px) rotate(1deg); }
}
.phone-screen {
  width: 100%;
  height: 100%;
  border-radius: 30px;
  background: var(--color-surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--color-text);
}
.phone-status {
  display: flex;
  justify-content: space-between;
  padding: 14px 18px 6px;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--color-text-muted);
}
.phone-header { padding: 6px 18px 14px; }
.phone-header .greet { font-size: 1.15rem; font-weight: 800; }
.phone-header .sub { font-size: 0.75rem; color: var(--color-text-muted); margin-top: 2px; }
.phone-stats { display: flex; gap: 8px; padding: 0 18px; }
.phone-stat {
  flex: 1;
  background: var(--color-surface-2);
  border-radius: 14px;
  padding: 10px;
}
.phone-stat .dot {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--color-primary) 18%, transparent);
  margin-bottom: 8px;
}
.phone-stat .dot svg { width: 12px; height: 12px; color: var(--color-primary); }
.phone-stat .val { font-size: 1rem; font-weight: 800; }
.phone-stat .lbl { font-size: 0.62rem; color: var(--color-text-muted); font-weight: 600; }
.phone-card {
  margin: 14px 18px 0;
  background: var(--color-surface-2);
  border-radius: 16px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.phone-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-tertiary));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 0.75rem; font-weight: 800;
  flex-shrink: 0;
}
.phone-card .name { font-weight: 700; font-size: 0.86rem; }
.phone-card .status { display: flex; align-items: center; gap: 5px; font-size: 0.68rem; color: var(--color-success); font-weight: 700; margin-top: 3px; }
.phone-card .status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-success); }
.phone-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px 18px; }
.phone-tile { background: var(--color-surface-2); border-radius: 14px; padding: 12px; }
.phone-tile .ic {
  width: 26px; height: 26px; border-radius: 8px; margin-bottom: 8px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--color-tertiary) 18%, transparent);
}
.phone-tile .ic svg { width: 14px; height: 14px; color: var(--color-tertiary); }
.phone-tile .t { font-size: 0.72rem; font-weight: 700; }
.phone-tile .d { font-size: 0.6rem; color: var(--color-text-muted); margin-top: 1px; }

/* ---------- Sections ---------- */
.section { padding: 96px 0; }
.section-alt { background: var(--color-bg-alt); }
.section-head { max-width: 640px; margin: 0 auto 52px; text-align: center; }
.section-head > * + * { margin-top: 14px; }
.section-head.left { margin-left: 0; text-align: left; }

/* Reveal-on-scroll is progressive enhancement: content only ever starts hidden
   once script.js has confirmed it's there to un-hide it again (the .js-reveal
   class it adds to <html> on load). Without JS -- or before it finishes
   parsing -- every section renders fully visible immediately, so there's no
   "flash of invisible content" window and no dependency on JS for the page's
   actual content to be readable. */
[data-reveal] { transition: opacity 0.6s ease, transform 0.6s ease; }
.js-reveal [data-reveal] { opacity: 0; transform: translateY(18px); }
.js-reveal [data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* Respect the OS-level "reduce motion" preference -- content still reveals,
   just without the slide/fade, for anyone who's told their system motion is
   distracting or uncomfortable. */
@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
  .phone { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Feature grid ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.feature-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 26px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.feature-icon {
  width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.feature-icon svg { width: 24px; height: 24px; }
.feature-card h3 { margin-bottom: 8px; }
.feature-card p { color: var(--color-text-muted); font-size: 0.92rem; }

.tone-primary .feature-icon { background: color-mix(in srgb, var(--color-primary) 14%, transparent); color: var(--color-primary); }
.tone-tertiary .feature-icon { background: color-mix(in srgb, var(--color-tertiary) 14%, transparent); color: var(--color-tertiary); }
.tone-warning .feature-icon { background: color-mix(in srgb, var(--color-warning) 16%, transparent); color: var(--color-warning); }
.tone-danger .feature-icon { background: color-mix(in srgb, var(--color-danger) 14%, transparent); color: var(--color-danger); }

/* ---------- Steps ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  counter-reset: step;
  position: relative;
}
.step { position: relative; }
.step-num {
  width: 44px; height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-tertiary));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  margin-bottom: 18px;
}
.step h3 { margin-bottom: 8px; }
.step p { color: var(--color-text-muted); font-size: 0.92rem; }

/* ---------- Download ---------- */
.download-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.download-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 34px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
}
.download-card.is-primary {
  background: linear-gradient(160deg, color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)), var(--color-surface));
  border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
}
.download-card .tag {
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
}
.download-card.is-primary .tag { background: color-mix(in srgb, var(--color-primary) 18%, transparent); color: var(--color-primary); }
.download-card.is-child .tag { background: color-mix(in srgb, var(--color-tertiary) 18%, transparent); color: var(--color-tertiary); }
.download-card .icon-badge {
  width: 56px; height: 56px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
}
.download-card.is-primary .icon-badge { background: color-mix(in srgb, var(--color-primary) 14%, transparent); }
.download-card.is-child .icon-badge { background: color-mix(in srgb, var(--color-tertiary) 14%, transparent); }
.download-card .icon-badge svg { width: 28px; height: 28px; }
.download-card.is-primary .icon-badge svg { color: var(--color-primary); }
.download-card.is-child .icon-badge svg { color: var(--color-tertiary); }
.download-card p.desc { color: var(--color-text-muted); font-size: 0.94rem; }
.download-meta {
  display: flex;
  gap: 18px;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  font-weight: 600;
  padding-top: 4px;
  border-top: 1px solid var(--color-border);
  margin-top: 4px;
}
.download-meta span { display: flex; align-items: center; gap: 6px; }
.download-meta svg { width: 14px; height: 14px; }
.install-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: color-mix(in srgb, var(--color-warning) 12%, transparent);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-top: 44px;
  font-size: 0.88rem;
}
.install-note svg { width: 20px; height: 20px; color: var(--color-warning); flex-shrink: 0; margin-top: 1px; }
.install-note b { color: var(--color-text); }

/* ---------- Security ---------- */
.security-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.security-list { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.security-list li { display: flex; gap: 14px; align-items: flex-start; }
.security-list .ic {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  background: color-mix(in srgb, var(--color-success) 16%, transparent);
  display: flex; align-items: center; justify-content: center;
}
.security-list .ic svg { width: 17px; height: 17px; color: var(--color-success); }
.security-list b { display: block; font-size: 0.96rem; margin-bottom: 2px; }
.security-list span { color: var(--color-text-muted); font-size: 0.88rem; }
.security-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px;
}
.security-panel .badge-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.chip {
  font-size: 0.76rem;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
}

/* ---------- CTA banner ---------- */
.cta-banner {
  border-radius: var(--radius-lg);
  padding: 56px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-tertiary));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.cta-banner h2 { color: #fff; }
.cta-banner p { color: rgba(255,255,255,0.85); margin-top: 10px; }
.cta-banner .btn-outline { border-color: rgba(255,255,255,0.5); color: #fff; }
.cta-banner .btn-outline:hover { background: rgba(255,255,255,0.12); border-color: #fff; }
.cta-banner .btn-primary { background: #fff; color: var(--color-primary); box-shadow: none; }
.cta-banner .btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

/* ---------- Footer ---------- */
.footer { padding: 56px 0 36px; border-top: 1px solid var(--color-border); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 36px;
}
.footer-brand p { color: var(--color-text-muted); font-size: 0.9rem; margin-top: 12px; max-width: 320px; }
.footer h4 { font-size: 0.85rem; margin-bottom: 16px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer a { text-decoration: none; color: var(--color-text-muted); font-size: 0.9rem; }
.footer a:hover { color: var(--color-text); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
  font-size: 0.82rem;
  color: var(--color-text-muted);
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  /* The mobile drawer (see .mobile-nav) already repeats every link plus its
     own "Hoziroq yuklab olish" CTA, so the full nav-cta button pair is just
     redundant clutter at this width -- and specifically crowds the brand
     wordmark, which wraps to two lines in the ~360-420px range otherwise. */
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .hero-grid { grid-template-columns: 1fr; }
  .phone-wrap { order: -1; }
  .phone { margin: 0 auto; width: 260px; height: 536px; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .download-grid { grid-template-columns: 1fr; }
  .security-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .section { padding: 64px 0; }
  .hero { padding: 48px 0 40px; }
  .feature-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .cta-banner { padding: 36px 24px; flex-direction: column; text-align: center; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Setup guide page (qollanma.html) -- shares every token/component above,
   this block only adds what's specific to a long-form step-by-step guide:
   a breadcrumb hero, a jump-to-step contents strip, numbered step cards,
   callouts, a terminal-style code block, a permissions table and an
   accordion FAQ (native <details>/<summary>, no JS needed for that part).
   ========================================================================== */

.guide-hero { padding: 48px 0 40px; }
.breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  margin-bottom: 22px;
}
.breadcrumb:hover { color: var(--color-primary); }
.breadcrumb svg { width: 15px; height: 15px; }

.toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}
.toc a {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 9px 16px 9px 10px;
  border-radius: var(--radius-pill);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.toc a:hover { border-color: var(--color-primary); transform: translateY(-1px); }
.toc .num {
  width: 20px; height: 20px; border-radius: 50%;
  background: color-mix(in srgb, var(--color-primary) 16%, transparent);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem;
}

.guide-steps { display: flex; flex-direction: column; gap: 20px; }
.step-detail {
  scroll-margin-top: 88px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px;
}
.step-detail-head { display: flex; align-items: flex-start; gap: 18px; }
.step-detail-num {
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-tertiary));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 1.05rem;
}
.step-detail-body { padding-top: 18px; }
.step-detail-body > * + * { margin-top: 16px; }
.step-detail-body p { color: var(--color-text-muted); font-size: 0.96rem; }
.step-detail-body ol, .step-detail-body ul { margin: 0; padding-left: 22px; color: var(--color-text-muted); font-size: 0.96rem; }
.step-detail-body li + li { margin-top: 8px; }
.step-detail-body strong { color: var(--color-text); }

/* Callouts -- info/warning tones, distinct from the download page's single
   .install-note so a guide can mix "just FYI" with "pay attention" boxes. */
.callout {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  font-size: 0.9rem;
}
.callout svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.callout b { color: var(--color-text); }
.callout-warning { background: color-mix(in srgb, var(--color-warning) 12%, transparent); }
.callout-warning svg { color: var(--color-warning); }
.callout-info { background: color-mix(in srgb, var(--color-tertiary) 10%, transparent); }
.callout-info svg { color: var(--color-tertiary); }

/* Terminal-style code block for adb commands */
.code-block {
  position: relative;
  background: #0D0E12;
  border-radius: var(--radius-sm);
  padding: 18px 52px 18px 18px;
  overflow-x: auto;
}
.code-block pre {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.85rem;
  line-height: 1.7;
  color: #E4E2E9;
  white-space: pre;
}
.code-block .cmt { color: #8B8996; }
.copy-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: #E4E2E9;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease;
}
.copy-btn:hover { background: rgba(255,255,255,0.14); }
.copy-btn svg { width: 15px; height: 15px; }
.copy-btn.is-copied { color: var(--color-success, #1E7A3D); }

/* Two side-by-side method cards (ADB vs QR) inside step 3 */
.method-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.method-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px;
  background: var(--color-surface-2);
}
.method-card .tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  margin-bottom: 10px;
}
.method-card h4 { font-size: 1rem; margin-bottom: 6px; }
.method-card p { color: var(--color-text-muted); font-size: 0.88rem; margin: 0 0 10px; }

/* Permissions table -- .table-scroll is the overflow container: on a narrow
   viewport the table itself would otherwise either get clipped at the
   viewport edge or force the whole page to scroll horizontally, neither of
   which is acceptable. This keeps the horizontal scroll local to the table. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.perm-table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 0.9rem; }
.perm-table th {
  text-align: left;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  padding: 0 0 10px;
  border-bottom: 1px solid var(--color-border);
}
.perm-table td {
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
  color: var(--color-text-muted);
}
.perm-table tr:last-child td { border-bottom: none; }
.perm-table td:first-child {
  color: var(--color-text);
  font-weight: 700;
  white-space: nowrap;
  padding-right: 20px;
}

/* Mini feature grid re-used inside "sozlash" step */
.mini-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mini-feature {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 14px;
  background: var(--color-surface-2);
}
.mini-feature .ic { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; background: color-mix(in srgb, var(--color-primary) 14%, transparent); }
.mini-feature .ic svg { width: 16px; height: 16px; color: var(--color-primary); }
.mini-feature b { display: block; font-size: 0.86rem; }
.mini-feature span { font-size: 0.78rem; color: var(--color-text-muted); }

/* Accordion FAQ -- native <details>/<summary>, styled to match the rest of
   the page. No JS required for the expand/collapse itself. */
.accordion-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.accordion-item + .accordion-item { margin-top: 10px; }
.accordion-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-weight: 700;
  font-size: 0.95rem;
  background: var(--color-surface);
}
.accordion-item summary::-webkit-details-marker { display: none; }
.accordion-item summary .chev { flex-shrink: 0; width: 18px; height: 18px; color: var(--color-text-muted); transition: transform 0.2s ease; }
.accordion-item[open] summary .chev { transform: rotate(180deg); }
.accordion-item .accordion-body {
  padding: 0 20px 20px;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

@media (max-width: 700px) {
  .method-grid { grid-template-columns: 1fr; }
  .mini-feature-grid { grid-template-columns: 1fr 1fr; }
  .step-detail { padding: 22px; }
}

/* Mobile nav drawer */
.mobile-nav {
  position: fixed;
  inset: 72px 0 0 0;
  background: var(--color-bg);
  z-index: 90;
  padding: 24px;
  display: none;
  flex-direction: column;
  gap: 4px;
}
.mobile-nav.is-open { display: flex; }
.mobile-nav a {
  text-decoration: none;
  color: var(--color-text);
  font-weight: 700;
  font-size: 1.15rem;
  padding: 16px 4px;
  border-bottom: 1px solid var(--color-border);
}
.mobile-nav .btn { margin-top: 20px; }