/* InstaUp — stylesheet. Tokens sourced from docs/DESIGN.md §2.
   Logical properties only (RTL-safe): margin-inline-*, padding-inline-*,
   inset-inline-*, border-start-*-radius, text-align: start/end. */

/* Vazirmatn — SIL Open Font License, see /fonts/Vazirmatn-OFL.txt.
   Self-hosted variable font (weights 100-900 in one file) used for fa/ar,
   scoped by [lang] below so en/hi keep the system font stack. */
@font-face {
  font-family: "Vazirmatn";
  src: url("/fonts/Vazirmatn[wght].woff2") format("woff2-variations"),
       url("/fonts/Vazirmatn[wght].woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------- */
/* 1. Tokens                                                         */
/* ---------------------------------------------------------------- */
:root {
  /* brand */
  --brand-900: #B0166F;
  --brand-800: #D41E89;
  --brand-700: #E7197B;
  --brand-600: #F02B7D;
  --brand-500: #F8397E;
  --brand-400: #FB3570;
  --brand-100: #FDE4EF;
  --brand-050: #FFF5FA;

  --accent-600: #F78348;
  --accent-500: #F8A23F;
  --accent-400: #FAAE36;
  --accent-300: #FEB534;
  --coral-500:  #F86166;

  --tg-start: #3FD49D;
  --tg-end:   #5979E6;

  /* Deepened from the raw sampled brand hues (#E7197B->#F8A23F, #3FD49D->#5979E6)
     so white text and gradient-clipped headline text both clear WCAG contrast
     across every point on the gradient — see progress.md decisions log. */
  --grad-cta:    linear-gradient(95deg, #C71768 0%, #D81F4C 50%, #C2481F 100%);
  --grad-brand:  linear-gradient(135deg, #D41E89 0%, #E9147A 55%, #D7176C 100%);
  --grad-header: linear-gradient(90deg, #E7197B 0%, #F02B7D 100%);
  --grad-warm:   linear-gradient(90deg, #FEB534 0%, #F43266 100%);

  /* surfaces (light) */
  --bg:         #EFF0F2;
  --bg-elev:    #FFFFFF;
  --bg-chip:    #F6F6F6;
  --bg-tint:    #FFF5FA;
  --border:     rgba(17, 17, 24, 0.08);
  --border-str: rgba(17, 17, 24, 0.14);

  /* text (light) */
  --fg:      #14131A;
  --fg-mut:  #5C5A68;
  --fg-soft: #8A8794;
  --fg-inv:  #FFFFFF;

  /* elevation */
  --sh-1: 0 1px 2px rgba(20,19,26,.06), 0 1px 1px rgba(20,19,26,.04);
  --sh-2: 0 4px 16px rgba(20,19,26,.07), 0 1px 3px rgba(20,19,26,.05);
  --sh-3: 0 12px 32px rgba(20,19,26,.10), 0 2px 8px rgba(20,19,26,.05);
  --sh-cta: 0 8px 22px rgba(231,25,123,.32);

  /* geometry */
  --r-sm: 10px;  --r-md: 16px;  --r-lg: 22px;  --r-xl: 28px;  --r-pill: 999px;

  /* type */
  --f-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans",
            "Noto Sans Arabic", "Noto Sans Devanagari", Vazirmatn, sans-serif;

  --t-display: clamp(2rem,  1.35rem + 3.2vw, 3.5rem);
  --t-h2:      clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  --t-h3:      clamp(1.125rem, 1.03rem + .45vw, 1.375rem);
  --t-body:    clamp(1rem, .97rem + .16vw, 1.0625rem);
  --t-sm:      .9375rem;
  --t-xs:      .8125rem;

  /* layout */
  --wrap: 1120px;
  --gutter: clamp(1rem, .6rem + 1.8vw, 2rem);
  --sec-y: clamp(3rem, 2rem + 5vw, 6rem);

  /* hero background blobs — see dark overrides below; these light-mode
     values are a soft blush pink, which reads as a gray smudge if reused
     as-is on a dark background (that was a real bug, not just a design
     nitpick — see progress.md). */
  --blob-1: #EACDD2;
  --blob-2: #FDE4EF;
  --blob-opacity: .55;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F0E14;  --bg-elev: #1A1922;  --bg-chip: #232230;  --bg-tint: #241621;
    --border: rgba(255,255,255,.10);  --border-str: rgba(255,255,255,.18);
    --fg: #F4F3F7;  --fg-mut: #B4B1C0;  --fg-soft: #837F92;
    --sh-1: 0 1px 2px rgba(0,0,0,.4);
    --sh-2: 0 4px 16px rgba(0,0,0,.45);
    --sh-3: 0 12px 32px rgba(0,0,0,.55);
    --sh-cta: 0 8px 22px rgba(231,25,123,.40);
    --blob-1: #6E1A4A;
    --blob-2: #3E2263;
    --blob-opacity: .45;
  }
}
:root[data-theme="dark"] {
  --bg: #0F0E14;  --bg-elev: #1A1922;  --bg-chip: #232230;  --bg-tint: #241621;
  --border: rgba(255,255,255,.10);  --border-str: rgba(255,255,255,.18);
  --fg: #F4F3F7;  --fg-mut: #B4B1C0;  --fg-soft: #837F92;
  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 4px 16px rgba(0,0,0,.45);
  --sh-3: 0 12px 32px rgba(0,0,0,.55);
  --sh-cta: 0 8px 22px rgba(231,25,123,.40);
  --blob-1: #6E1A4A;
  --blob-2: #3E2263;
  --blob-opacity: .45;
}
:root[data-theme="light"] {
  --bg: #EFF0F2;  --bg-elev: #FFFFFF;  --bg-chip: #F6F6F6;  --bg-tint: #FFF5FA;
  --border: rgba(17,17,24,.08);  --border-str: rgba(17,17,24,.14);
  --fg: #14131A;  --fg-mut: #5C5A68;  --fg-soft: #8A8794;
  --sh-1: 0 1px 2px rgba(20,19,26,.06), 0 1px 1px rgba(20,19,26,.04);
  --sh-2: 0 4px 16px rgba(20,19,26,.07), 0 1px 3px rgba(20,19,26,.05);
  --sh-3: 0 12px 32px rgba(20,19,26,.10), 0 2px 8px rgba(20,19,26,.05);
  --sh-cta: 0 8px 22px rgba(231,25,123,.32);
  --blob-1: #EACDD2;
  --blob-2: #FDE4EF;
  --blob-opacity: .55;
}

/* ---------------------------------------------------------------- */
/* 2. Reset                                                           */
/* ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; }
h1, h2, h3, h4, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, picture, svg { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
button { background: none; border: 0; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------- */
/* 3. Base                                                            */
/* ---------------------------------------------------------------- */
html {
  font-family: var(--f-sans);
  background: var(--bg);
  color: var(--fg);
  /* Safety net for decorative blobs (see §9 .features-blob) that intentionally
     bleed past their section's edge to render as a full, uncut circle —
     this stops any of them from ever causing a horizontal scrollbar. */
  overflow-x: clip;
}
html[lang="fa"], html[lang="ar"] {
  font-family: "Vazirmatn", var(--f-sans);
}
body {
  font-size: var(--t-body);
  line-height: 1.65;
}
h1, h2, h3 {
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
.prose { max-width: 68ch; }
.tabular { font-variant-numeric: tabular-nums; }

:focus-visible {
  outline: 3px solid var(--brand-600);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  inset-inline-start: 1rem;
  top: -3rem;
  background: var(--bg-elev);
  color: var(--fg);
  padding: .75rem 1.25rem;
  border-radius: var(--r-md);
  box-shadow: var(--sh-2);
  z-index: 100;
  transition: top .18s ease;
}
.skip-link:focus { top: 1rem; }

/* ---------------------------------------------------------------- */
/* 4. Layout primitives                                               */
/* ---------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
section { padding-block: var(--sec-y); }
.grid-3 {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.center-text { text-align: center; }
.section-head {
  text-align: center;
  max-width: 42rem;
  margin-inline: auto;
  margin-block-end: clamp(2rem, 1.5rem + 2vw, 3rem);
}
.section-head p { color: var(--fg-mut); margin-block-start: .75rem; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- */
/* 5. Header                                                          */
/* ---------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 60px;
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--bg-elev) 78%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-block-end: 1px solid var(--border);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
}
.brand { display: flex; align-items: center; gap: .5rem; }
.brand img { border-radius: var(--r-sm); }
.brand-word {
  font-weight: 800;
  font-size: 1.125rem;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--brand-700);
  -webkit-text-fill-color: transparent;
}
.header-spacer { flex: 1; }
.version-chip {
  font-size: var(--t-xs);
  color: var(--fg-mut);
  background: var(--bg-chip);
  border-radius: var(--r-pill);
  padding: .3rem .7rem;
}
.site-header .header-dl {
  display: none;
}
@media (min-width: 48rem) {
  .site-header .header-dl { display: inline-flex; }
}

/* ---------------------------------------------------------------- */
/* 6. Language switcher — <details>, zero JS                          */
/* ---------------------------------------------------------------- */
.lang { position: relative; }
.lang summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .75rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-str);
  font-size: var(--t-sm);
  color: var(--fg);
}
.lang summary::-webkit-details-marker { display: none; }
.lang summary::marker { content: ""; }
.lang[open] summary { border-color: var(--brand-600); }
.lang-menu {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + .5rem);
  min-width: 10rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
  padding: .4rem;
  z-index: 60;
}
.lang-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .55rem .7rem;
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
}
.lang-menu a:hover { background: var(--bg-chip); }
.lang-menu a[aria-current="true"] { color: var(--brand-700); font-weight: 600; }
.lang-dot {
  width: .4rem; height: .4rem; border-radius: 50%;
  background: var(--brand-600);
}

/* ---------------------------------------------------------------- */
/* 7. Buttons                                                         */
/* ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 56px;
  padding-inline: 1.5rem;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 1rem;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.99); }
.btn-cta {
  background: var(--grad-cta);
  color: #fff;
  box-shadow: var(--sh-cta);
}
.btn-cta[aria-disabled="true"] {
  background: var(--bg-chip);
  color: var(--fg-soft);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}
.btn-ghost {
  background: transparent;
  border: 1.5px solid var(--border-str);
  color: var(--fg);
}
.btn-sm { min-height: 40px; padding-inline: 1rem; font-size: var(--t-sm); }
.btn-block { width: 100%; }
@media (max-width: 47.99rem) {
  .hero-ctas .btn { width: 100%; }
}

/* ---------------------------------------------------------------- */
/* 8. Hero                                                            */
/* ---------------------------------------------------------------- */
.hero { position: relative; overflow: clip; }
.hero-blob {
  position: absolute;
  inset-block-start: -4rem;
  inset-inline-start: -6rem;
  width: 26rem;
  height: 26rem;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--blob-1) 0%, transparent 100%);
  opacity: var(--blob-opacity);
  filter: blur(40px);
  pointer-events: none;
}
.hero-blob-2 {
  inset-block-start: auto;
  inset-block-end: -6rem;
  inset-inline-start: auto;
  inset-inline-end: -6rem;
  /* Fades to fully transparent by 42% of the radius instead of 100% — with
     this shape's position and size, .hero's clip line falls at ~54% of the
     radius, so by the time it gets clipped there's nothing left to cut.
     Fading it to the box's own edge (like .hero-blob does) leaves real
     color still showing right at the clip line, which reads as a hard,
     ugly seam no matter how the element around it is sized or positioned —
     the fix has to be in this gradient's own falloff, not its surroundings. */
  background: radial-gradient(closest-side, var(--blob-2) 0%, transparent 42%);
}
.hero-grid {
  position: relative;
  display: grid;
  gap: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  align-items: center;
}
@media (min-width: 64rem) {
  .hero-grid { grid-template-columns: 1.05fr .95fr; }
}
/* Text first, phone screenshot after — on every screen size. This just
   matches source order (Hero.tsx renders hero-copy before hero-phone-wrap),
   so no `order` override is needed at all. */
.eyebrow {
  display: inline-flex;
  padding: .4rem .9rem;
  border-radius: var(--r-pill);
  background: var(--bg-tint);
  color: var(--brand-700);
  font-size: var(--t-xs);
  font-weight: 700;
  margin-block-end: 1.25rem;
}
.hero h1 { font-size: var(--t-display); }
.grad {
  background: var(--grad-cta);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--brand-700);
  -webkit-text-fill-color: transparent;
}
.hero-sub {
  color: var(--fg-mut);
  margin-block-start: 1.25rem;
  max-width: 42rem;
}
.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-block: 1.5rem;
}
.chip {
  background: var(--bg-chip);
  border-radius: var(--r-pill);
  padding: .4rem .8rem;
  font-size: var(--t-xs);
  color: var(--fg-mut);
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-block-start: 1.75rem;
}
.trust-line {
  margin-block-start: 1.25rem;
  font-size: var(--t-xs);
  color: var(--fg-soft);
}
.notice {
  margin-block-start: 1rem;
  background: var(--bg-tint);
  border-inline-start: 3px solid var(--brand-700);
  border-radius: var(--r-sm);
  padding: .75rem 1rem;
  font-size: var(--t-sm);
  color: var(--fg-mut);
}

.phone {
  position: relative;
  margin-inline: auto;
  max-width: 300px;
  border-radius: var(--r-xl);
  background: var(--bg-elev);
  box-shadow: var(--sh-3);
  padding: 8px;
}
.phone img {
  width: 100%;
  height: auto;
  border-radius: calc(var(--r-xl) - 8px);
}

/* ---------------------------------------------------------------- */
/* 9. Feature / howItWorks cards                                      */
/* ---------------------------------------------------------------- */
.card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  padding: 1.5rem;
}
.icon-tile {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-block-end: 1rem;
}
.icon-tile svg { width: 22px; height: 22px; }
/* Stops deepened from the raw sampled hues so the white icon glyph clears the
   3:1 non-text contrast floor at every point on each tile's gradient. */
.tile-followers { background: linear-gradient(135deg,#E24E58,#C21464); }
.tile-likes      { background: linear-gradient(135deg,#E01F60,#C21464); }
.tile-comments   { background: linear-gradient(135deg,#C96F17,#A8481A); }
.tile-coins      { background: linear-gradient(135deg,#C07D18,#A8204A); }
.tile-accounts   { background: linear-gradient(135deg,#B81A72,#C21464); }
.tile-stats      { background: linear-gradient(135deg,#2E4FAE,#188562); }

.feature-card h3 { margin-block-end: .5rem; }
.feature-card p { color: var(--fg-mut); }

.steps {
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 48rem) {
  .steps { grid-template-columns: repeat(3, 1fr); }
}
.step-num {
  font-size: 3rem;
  font-weight: 800;
  opacity: .9;
  background: var(--grad-cta);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--brand-700);
  -webkit-text-fill-color: transparent;
  margin-block-end: .5rem;
}
.step-card p { color: var(--fg-mut); margin-block-start: .5rem; }

/* ---------------------------------------------------------------- */
/* 10. Screenshots gallery                                            */
/* ---------------------------------------------------------------- */
.gallery {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block-end: .5rem;
  scrollbar-width: thin;
}
.gallery-item {
  flex: 0 0 min(72vw, 260px);
  scroll-snap-align: center;
}
@media (min-width: 64rem) {
  .gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow: visible;
  }
  .gallery-item { flex: unset; }
}
.gallery-frame {
  border-radius: var(--r-lg);
  background: var(--bg-elev);
  box-shadow: var(--sh-2);
  padding: 6px;
  display: block;
}
.gallery-frame img { border-radius: calc(var(--r-lg) - 6px); width: 100%; height: auto; }
.gallery-caption {
  margin-block-start: .6rem;
  font-size: var(--t-xs);
  color: var(--fg-mut);
  text-align: center;
}

.lightbox {
  border: none;
  border-radius: var(--r-lg);
  padding: 0;
  max-width: min(92vw, 480px);
  background: var(--bg-elev);
  box-shadow: var(--sh-3);
}
.lightbox::backdrop { background: rgba(10,9,14,.6); }
.lightbox[open] { animation: fade-in .24s ease; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.lightbox img { width: 100%; height: auto; border-radius: var(--r-lg); }
.lightbox-close {
  position: absolute;
  top: .6rem;
  inset-inline-end: .6rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,.5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------------------------------------------------------------- */
/* 11. Install guide                                                  */
/* ---------------------------------------------------------------- */
.install-list { display: flex; flex-direction: column; gap: .75rem; }
.install-row {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  background: var(--bg-chip);
  border-radius: var(--r-md);
  padding: .9rem 1rem;
}
.install-badge {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  background: var(--grad-cta);
  color: #fff;
  font-weight: 700;
  font-size: var(--t-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.install-row p { margin: 0; }

/* ---------------------------------------------------------------- */
/* 12. Telegram band                                                  */
/* ---------------------------------------------------------------- */
.telegram-band {
  background: var(--grad-brand);
  color: #fff;
  width: calc(100% - 2 * var(--gutter));
  max-width: calc(var(--wrap) - 2 * var(--gutter));
  margin-inline: auto;
  padding-block: clamp(2rem, 1.5rem + 2vw, 3rem);
  border-radius: var(--r-lg);
}
.telegram-band .wrap {
  text-align: center;
}
.telegram-band h2 { color: #fff; }
.telegram-band p {
  color: rgba(255,255,255,.9);
  margin-block: .75rem 1.5rem;
  max-width: 34rem;
  margin-inline: auto;
}
.btn-tg-white {
  background: #fff;
  color: var(--brand-700);
}

/* ---------------------------------------------------------------- */
/* 13. FAQ                                                            */
/* ---------------------------------------------------------------- */
.faq-card { padding: .25rem 1.5rem; }
.faq {
  border-block-end: 1px solid var(--border);
  padding-block: 1rem;
}
.faq:last-child { border-block-end: none; }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-weight: 600;
  font-size: var(--t-h3);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ""; }
.faq-chev { transition: transform .18s ease; flex: none; }
.faq[open] .faq-chev { transform: rotate(45deg); }
.faq p {
  color: var(--fg-mut);
  margin-block-start: .75rem;
}

/* ---------------------------------------------------------------- */
/* 14. Download CTA band                                              */
/* ---------------------------------------------------------------- */
.download-band { text-align: center; }
.download-band h2 { margin-block-end: 1.5rem; }
.download-band p { color: var(--fg-mut); margin-block: .75rem 1.5rem; }

/* ---------------------------------------------------------------- */
/* 15. Footer                                                         */
/* ---------------------------------------------------------------- */
.site-footer {
  background: var(--bg-elev);
  border-block-start: 1px solid var(--border);
}
.footer-grid {
  display: grid;
  gap: 2rem;
  padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem) 2rem;
}
@media (min-width: 48rem) {
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; }
}
.footer-grid h4 {
  font-size: var(--t-sm);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--fg-soft);
  margin-block-end: .9rem;
}
.footer-links { display: flex; flex-direction: column; gap: .6rem; }
.footer-links a { color: var(--fg-mut); }
.footer-links a:hover { color: var(--brand-700); }
.footer-tagline { color: var(--fg-mut); margin-block-start: .5rem; max-width: 26rem; }
.footer-bottom {
  border-block-start: 1px solid var(--border);
  padding-block: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
  font-size: var(--t-xs);
  color: var(--fg-soft);
}
.footer-credit { color: var(--fg-soft); text-decoration: none; }
.footer-credit:hover { color: var(--fg-mut); text-decoration: underline; }

/* ---------------------------------------------------------------- */
/* 16. Legal / 404 pages                                              */
/* ---------------------------------------------------------------- */
.legal-page .wrap { max-width: 46rem; }
.legal-page h1 { font-size: var(--t-h2); margin-block-end: .5rem; }
.legal-page .updated { color: var(--fg-soft); font-size: var(--t-sm); margin-block-end: 2rem; }
.legal-section { margin-block-end: 2rem; }
.legal-section h2 { font-size: var(--t-h3); margin-block-end: .5rem; }
.legal-section p { color: var(--fg-mut); }

.not-found {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.not-found h1 { font-size: var(--t-h2); margin-block-end: .75rem; }
.not-found p { color: var(--fg-mut); margin-block-end: 1.5rem; }

/* ---------------------------------------------------------------- */
/* 17. Admin panel                                                    */
/* ---------------------------------------------------------------- */
.admin-page { background: var(--bg); min-height: 100vh; }
.admin-shell { padding-block: clamp(2rem, 1.5rem + 2vw, 4rem); }
.admin-card {
  margin-inline: auto;
  max-width: 420px;
  background: var(--bg-elev);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  padding: 2rem;
}
.admin-card.wide { max-width: 640px; }
.admin-card h1 { font-size: var(--t-h3); margin-block-end: 1.5rem; }
.field { margin-block-end: 1.1rem; }
.field label {
  display: block;
  font-size: var(--t-sm);
  font-weight: 600;
  margin-block-end: .4rem;
}
.field .help { display: block; font-size: var(--t-xs); color: var(--fg-soft); margin-block-start: .3rem; }
.field input {
  width: 100%;
  padding: .7rem .9rem;
  border: 1px solid var(--border-str);
  border-radius: var(--r-sm);
  background: var(--bg-elev);
  color: var(--fg);
}
.field input:focus { border-color: var(--brand-600); }
.field-error { color: var(--coral-500); font-size: var(--t-xs); margin-block-start: .3rem; }
.banner {
  border-radius: var(--r-md);
  padding: .8rem 1rem;
  font-size: var(--t-sm);
  margin-block-end: 1.25rem;
}
.banner-success { background: color-mix(in srgb, var(--tg-start) 18%, transparent); color: #1B7A54; }
.banner-error { background: color-mix(in srgb, var(--coral-500) 16%, transparent); color: #B23A3E; }
.admin-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-block-end: 1.5rem;
}
.admin-updated { font-size: var(--t-xs); color: var(--fg-soft); }

/* ---------------------------------------------------------------- */
/* 18. RTL icon flip                                                  */
/* ---------------------------------------------------------------- */
[dir="rtl"] .icon-dir { transform: scaleX(-1); }

/* bidi isolation for Latin tokens embedded in RTL copy */
bdi { unicode-bidi: isolate; }

/* ---------------------------------------------------------------- */
/* 19. Motion — hero entrance + scroll-reveal                        */
/* ---------------------------------------------------------------- */
/* Everything here is progressive enhancement: content is fully visible
   with no JS and no motion by default. `.js-reveal` (added by app.js once
   IntersectionObserver is available) is what switches items to their
   hidden starting state; without it nothing here applies. */

@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * {
    animation: reveal-up .6s ease both;
  }
  .hero-copy > *:nth-child(1) { animation-delay: .02s; }
  .hero-copy > *:nth-child(2) { animation-delay: .08s; }
  .hero-copy > *:nth-child(3) { animation-delay: .14s; }
  .hero-copy > *:nth-child(4) { animation-delay: .2s; }
  .hero-copy > *:nth-child(5) { animation-delay: .26s; }
  .hero-copy > *:nth-child(6) { animation-delay: .32s; }
  .hero-phone-wrap {
    animation: reveal-scale .7s ease .18s both;
  }
}
@keyframes reveal-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes reveal-scale {
  from { opacity: 0; transform: scale(.95); }
  to   { opacity: 1; transform: none; }
}

.js-reveal .section-head,
.js-reveal .grid-3 > *,
.js-reveal .steps > *,
.js-reveal .gallery-item,
.js-reveal .install-row,
.js-reveal .faq,
.js-reveal .telegram-band h2,
.js-reveal .telegram-band p,
.js-reveal .telegram-band .btn,
.js-reveal .download-band h2,
.js-reveal .download-band p,
.js-reveal .download-band .btn {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .28s ease, transform .28s ease;
}
.js-reveal .is-visible,
.js-reveal .telegram-band h2.is-visible,
.js-reveal .telegram-band p.is-visible,
.js-reveal .telegram-band .btn.is-visible,
.js-reveal .download-band h2.is-visible,
.js-reveal .download-band p.is-visible,
.js-reveal .download-band .btn.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal .section-head,
  .js-reveal .grid-3 > *,
  .js-reveal .steps > *,
  .js-reveal .gallery-item,
  .js-reveal .install-row,
  .js-reveal .faq,
  .js-reveal .telegram-band h2,
  .js-reveal .telegram-band p,
  .js-reveal .telegram-band .btn,
  .js-reveal .download-band h2,
  .js-reveal .download-band p,
  .js-reveal .download-band .btn {
    opacity: 1;
    transform: none;
  }
}

/* A little extra life on hover for cards and gallery frames — buttons
   already had a hover lift (see §7). */
.card, .gallery-frame {
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover, .gallery-frame:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-3);
}
.icon-tile {
  transition: transform .2s ease;
}
.card:hover .icon-tile {
  transform: scale(1.08);
}