/* ==========================================================================
   Typeface
   Inter, self-hosted. SIL Open Font License 1.1 - free for commercial use.
   Self-hosted rather than loaded from a font CDN so that (a) the site renders
   in the same typeface on every device instead of falling back to whatever
   each machine happens to have, (b) no visitor data reaches a third party,
   and (c) there is no extra DNS lookup on the critical path.
   One variable file covers every weight from 100 to 900.
   ========================================================================== */
@font-face {
  font-family: "InterVar";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "InterVar";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   Design system
   Mobile-first. Every layout rule below assumes a 360px viewport first and
   only widens at the breakpoints, which is why nothing overflows sideways.
   ========================================================================== */

:root {
  /* surfaces */
  --bg:            #050a18;
  --bg-2:          #070e22;
  --surface:       #0c1630;
  --surface-2:     #101c3a;
  --surface-3:     #16234a;
  --border:        rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);

  /* text */
  --text:          #e9effc;
  --text-dim:      #9db0d6;
  --text-faint:    #6d80a8;

  /* brand */
  --c1:            #22d3ee;
  --c2:            #3b82f6;
  --c3:            #a855f7;
  --grad:          linear-gradient(100deg, var(--c1) 0%, var(--c2) 48%, var(--c3) 100%);
  --grad-soft:     linear-gradient(100deg, rgba(34,211,238,.16), rgba(168,85,247,.16));

  /* status */
  --ok:            #22c55e;
  --warn:          #f59e0b;
  --danger:        #f43f5e;

  /* platform accents */
  --yt:            #ff3d3d;
  --fb:            #1877f2;
  --ig:            #e1306c;

  /* shape */
  --r-sm:          10px;
  --r:             16px;
  --r-lg:          22px;
  --r-pill:        999px;

  --shadow:        0 18px 44px -22px rgba(0, 0, 0, .85);
  --shadow-glow:   0 0 0 1px rgba(59,130,246,.25), 0 18px 50px -18px rgba(59,130,246,.45);

  --wrap:          1160px;
  --nav-h:         64px;
  --tabbar-h:      66px;

  --ease:          cubic-bezier(.4, 0, .2, 1);
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Stops the whole page from ever scrolling sideways on a phone. */
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100dvh;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  /* System stack only. Every platform here ships a modern geometric sans, so
     the page paints on the first frame with no font request and no FOUT. */
  font-family: "InterVar", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif,
               "Apple Color Emoji", "Segoe UI Emoji";
  font-feature-settings: "kern" 1;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The ambient glow behind the page, painted once and never repainted. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(880px 440px at 78% -6%,  rgba(168, 85, 247, .20), transparent 62%),
    radial-gradient(760px 420px at 12% 2%,   rgba(34, 211, 238, .14), transparent 60%),
    radial-gradient(1000px 600px at 50% 100%, rgba(59, 130, 246, .10), transparent 68%),
    var(--bg);
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5 { margin: 0; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; }
p  { margin: 0; }
ul, ol { margin: 0; padding: 0; }

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

::selection { background: rgba(59, 130, 246, .35); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--c2); color: #fff; padding: 10px 16px; border-radius: var(--r-sm);
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 16px;
}

.section { padding-block: 44px; }
.section--tight { padding-block: 28px; }

.section-head { margin-bottom: 20px; }
.section-head h2 {
  font-size: clamp(21px, 5.2vw, 31px);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.section-head p {
  color: var(--text-dim);
  margin-top: 7px;
  font-size: 14.5px;
  max-width: 62ch;
}

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.card {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}

/* --------------------------------------------------------------------------
   Icons
   -------------------------------------------------------------------------- */
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 26px; height: 26px; }
.icon--fill { fill: currentColor; stroke: none; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.announce {
  background: var(--grad);
  color: #05122b;
  font-weight: 650;
  font-size: 13.5px;
  text-align: center;
  padding: 8px 16px;
}
.announce a { text-decoration: underline; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(5, 10, 24, .82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--border);
}

.site-header__bar {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand__mark { width: 38px; height: 38px; flex: none; border-radius: 11px; }
.brand__text { min-width: 0; }
.brand__name {
  font-size: 19px; font-weight: 800; letter-spacing: -0.03em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: block; line-height: 1.15;
}
.brand__tld {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand__tag {
  font-size: 11px; color: var(--text-faint); letter-spacing: .085em;
  text-transform: uppercase; white-space: nowrap; display: block;
}

.nav-desktop { display: none; }

.nav-toggle {
  margin-left: auto;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  cursor: pointer;
}
.nav-toggle:active { transform: scale(.95); }

.nav-drawer {
  display: none;
  border-top: 1px solid var(--border);
  padding: 10px 0 16px;
}
.nav-drawer[data-open="true"] { display: block; }
.nav-drawer a {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 14px;
  border-radius: var(--r-sm);
  color: var(--text-dim);
  font-weight: 600;
  min-height: 48px;
}
.nav-drawer a[aria-current="page"],
.nav-drawer a:hover { background: var(--surface-2); color: var(--text); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero { padding-top: 30px; padding-bottom: 8px; }

.hero__grid { display: grid; gap: 22px; }

.hero h1 {
  font-size: clamp(30px, 9vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.035em;
}
.hero h1 span { display: block; }

.hero__sub {
  margin-top: 13px;
  color: var(--text-dim);
  font-size: 15.5px;
  max-width: 54ch;
}

.hero__chips {
  display: flex; flex-wrap: wrap; gap: 9px;
  margin-top: 18px;
}
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 13px 8px 9px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 13px; font-weight: 650;
}
.chip__dot {
  width: 22px; height: 22px; border-radius: 7px;
  display: grid; place-items: center; color: #fff; flex: none;
}
.chip__dot .icon { width: 14px; height: 14px; }
.chip--youtube   .chip__dot { background: var(--yt); }
.chip--facebook  .chip__dot { background: var(--fb); }
.chip--instagram .chip__dot { background: linear-gradient(135deg, #f9ce34, #ee2a7b 52%, #6228d7); }

/* Decorative platform cluster - hidden on small screens where space is tight */
.hero__art { display: none; }

/* --------------------------------------------------------------------------
   Downloader
   -------------------------------------------------------------------------- */
.downloader { margin-top: 22px; }

.downloader__shell {
  position: relative;
  border-radius: var(--r-lg);
  padding: 2px;
  background: linear-gradient(120deg, rgba(34,211,238,.55), rgba(59,130,246,.5) 45%, rgba(168,85,247,.55));
  box-shadow: var(--shadow-glow);
}

.downloader__inner {
  background: linear-gradient(180deg, #0b1530, #081027);
  border-radius: calc(var(--r-lg) - 2px);
  padding: 14px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.field__input {
  position: relative;
  display: flex;
  align-items: center;
  background: #f4f7ff;
  border-radius: var(--r-pill);
  padding: 4px 4px 4px 16px;
  min-height: 56px;
}
.field__input .icon { color: #2b3a63; }

.field__input input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #0b1226;
  font-size: 16px;              /* 16px stops iOS from zooming on focus */
  padding: 12px 10px;
  outline: none;
}
.field__input input::placeholder { color: #7b88a8; }

.btn-download {
  border: 0;
  cursor: pointer;
  background: var(--grad);
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.01em;
  border-radius: var(--r-pill);
  min-height: 54px;
  padding: 0 22px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 10px 26px -12px rgba(59, 130, 246, .9);
  transition: transform .15s var(--ease), filter .15s var(--ease);
}
.btn-download:hover  { filter: brightness(1.07); }
.btn-download:active { transform: scale(.985); }
.btn-download[disabled] { opacity: .6; cursor: not-allowed; filter: none; }

.btn-download .spinner { display: none; }
.btn-download[data-busy="true"] .icon    { display: none; }
.btn-download[data-busy="true"] .spinner { display: block; }

.spinner {
  width: 19px; height: 19px; flex: none;
  border: 2.5px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.field__hint {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: 11px;
  padding-inline: 6px;
  color: var(--text-faint);
  font-size: 12.5px;
  overflow-wrap: anywhere;
}
.field__hint code { color: var(--text-dim); font-size: 12px; }

.paste-btn {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-dim);
  border-radius: var(--r-pill);
  padding: 7px 13px;
  font-size: 12.5px; font-weight: 650;
  cursor: pointer;
  min-height: 40px;
}
.paste-btn:hover { color: var(--text); border-color: var(--border-strong); }

/* status message under the field */
.status {
  display: none;
  align-items: flex-start; gap: 10px;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  font-size: 14px;
  line-height: 1.5;
}
.status[data-show="true"] { display: flex; }
.status--error   { background: rgba(244, 63, 94, .12);  border: 1px solid rgba(244, 63, 94, .3);  color: #ffd5dc; }
.status--ok      { background: rgba(34, 197, 94, .12);  border: 1px solid rgba(34, 197, 94, .3);  color: #c6f6d5; }
.status--info    { background: rgba(59, 130, 246, .12); border: 1px solid rgba(59, 130, 246, .3); color: #d3e4ff; }
.status .icon    { margin-top: 2px; }

/* --------------------------------------------------------------------------
   Feature strip
   -------------------------------------------------------------------------- */
.features {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}
.feature {
  background: var(--surface);
  padding: 16px 12px;
  min-width: 0;
  /* On a phone the icon sits above the text: two columns beside a 42px
     circle leaves too little room and every title wraps. The row layout
     returns at 560px, where four columns fit comfortably. */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.feature__icon {
  width: 42px; height: 42px; flex: none;
  /* Circular, matching the reference sheet - the square tiles read as heavier
     than the rest of the strip. */
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
}
.feature__icon--lime   { background: linear-gradient(140deg, #a3e635, #16a34a); }
.feature__icon--blue   { background: linear-gradient(140deg, #60a5fa, #2563eb); }
.feature__icon--teal   { background: linear-gradient(140deg, #2dd4bf, #0d9488); }
.feature__icon--violet { background: linear-gradient(140deg, #a78bfa, #7c3aed); }
.feature__text { min-width: 0; }
.feature strong { display: block; font-size: 14px; font-weight: 750; letter-spacing: -0.01em; }
.feature span   { display: block; font-size: 12px; color: var(--text-faint); margin-top: 1px; }

/* --------------------------------------------------------------------------
   Platform cards
   -------------------------------------------------------------------------- */
.platforms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.platform {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 18px 14px;
  text-align: center;
  transition: transform .18s var(--ease), border-color .18s var(--ease);
}
.platform:hover { transform: translateY(-3px); border-color: var(--border-strong); }

.platform__tile {
  width: 54px; height: 54px;
  margin: 0 auto 12px;
  border-radius: 16px;
  display: grid; place-items: center;
  color: #fff;
}
.platform__tile .icon { width: 27px; height: 27px; }
.platform--youtube   .platform__tile { background: linear-gradient(135deg, #ff6b6b, #e11d1d); }
.platform--facebook  .platform__tile { background: linear-gradient(135deg, #4f9bff, #0b5fd0); }
.platform--instagram .platform__tile { background: linear-gradient(135deg, #f9ce34, #ee2a7b 52%, #6228d7); }

.platform h3   { font-size: 16px; }
.platform p    { font-size: 12.5px; color: var(--text-faint); margin-top: 4px; }
.platform__note{ font-size: 12.5px; color: var(--text-dim); margin-top: 10px; line-height: 1.5; text-align: left; }

/* --------------------------------------------------------------------------
   Steps
   -------------------------------------------------------------------------- */
.steps { display: grid; gap: 12px; counter-reset: step; }

.step {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 18px 16px 18px 64px;
}
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 16px; top: 18px;
  width: 34px; height: 34px;
  border-radius: 11px;
  background: var(--grad);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 800; font-size: 15px;
}
.step h3 { font-size: 16px; }
.step p  { color: var(--text-dim); font-size: 14px; margin-top: 5px; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: 10px; }

.faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 46px 16px 16px;
  position: relative;
  font-weight: 650;
  font-size: 15px;
  min-height: 54px;
  display: flex;
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute; right: 18px; top: 50%;
  width: 9px; height: 9px;
  border-right: 2px solid var(--text-faint);
  border-bottom: 2px solid var(--text-faint);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details[open] summary { color: var(--c1); }
.faq__body {
  padding: 0 16px 16px;
  color: var(--text-dim);
  font-size: 14.5px;
  line-height: 1.68;
}

/* --------------------------------------------------------------------------
   Prose (policy pages, SEO block)
   -------------------------------------------------------------------------- */
.prose { color: var(--text-dim); font-size: 15.5px; line-height: 1.75; }
.prose > * + * { margin-top: 15px; }
.prose h2 { color: var(--text); font-size: 21px; margin-top: 30px; }
.prose h3 { color: var(--text); font-size: 17px; margin-top: 24px; }
.prose strong { color: var(--text); }
.prose a { color: var(--c1); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.prose ul, .prose ol { padding-left: 21px; }
.prose li { margin-top: 7px; }
.prose ul li { list-style: disc; }
.prose ol li { list-style: decimal; }
.prose hr { border: 0; border-top: 1px solid var(--border); margin-block: 26px; }
.prose code {
  background: var(--surface-2); padding: 2px 6px; border-radius: 6px;
  font-size: .9em; overflow-wrap: anywhere;
}
.prose table { width: 100%; border-collapse: collapse; font-size: 14px; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--border); padding: 9px 11px; text-align: left; }

/* --------------------------------------------------------------------------
   Result page
   -------------------------------------------------------------------------- */
.result { display: grid; gap: 18px; }

.media-card {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}

.media-card__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0a1229;
  overflow: hidden;
}
.media-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.media-card__thumb--tall { aspect-ratio: 4 / 5; max-height: 420px; }

.media-card__badge {
  position: absolute; left: 12px; top: 12px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: rgba(4, 9, 22, .8);
  backdrop-filter: blur(8px);
  font-size: 12px; font-weight: 700;
  border: 1px solid var(--border-strong);
}
.media-card__badge .icon { width: 14px; height: 14px; }
.media-card__badge--youtube   { color: #ff8080; }
.media-card__badge--facebook  { color: #79b3ff; }
.media-card__badge--instagram { color: #ff87b4; }

.media-card__time {
  position: absolute; right: 12px; bottom: 12px;
  padding: 5px 10px; border-radius: 8px;
  background: rgba(4, 9, 22, .85);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}

.media-card__body { padding: 16px; }
.media-card__title {
  font-size: 17px; line-height: 1.38; font-weight: 750;
  overflow-wrap: anywhere;
}
.media-meta {
  display: flex; flex-wrap: wrap; gap: 8px 16px;
  margin-top: 11px;
  color: var(--text-faint);
  font-size: 13px;
}
.media-meta span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.media-meta span > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }

/* quality list */
.formats { display: grid; gap: 10px; }

.format {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  min-height: 66px;
  transition: border-color .16s var(--ease), transform .16s var(--ease), background .16s var(--ease);
}
.format:hover { border-color: rgba(59, 130, 246, .5); transform: translateY(-1px); background: var(--surface-2); }
.format--best { border-color: rgba(34, 211, 238, .42); background: linear-gradient(100deg, rgba(34,211,238,.08), rgba(168,85,247,.06)); }

.format__badge {
  width: 46px; height: 46px; flex: none;
  border-radius: 12px;
  background: var(--surface-3);
  display: grid; place-items: center;
  color: var(--c1);
}
.format--best .format__badge { background: var(--grad); color: #fff; }
.format--audio .format__badge { color: #c4b5fd; }

.format__info { flex: 1 1 auto; min-width: 0; }
.format__label {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-weight: 750; font-size: 15px;
}
.format__tag {
  font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 6px;
  background: rgba(34, 211, 238, .16); color: var(--c1);
}
.format__sub { font-size: 12.5px; color: var(--text-faint); margin-top: 3px; }

.format__go {
  flex: none;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0 16px;
  min-height: 42px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  font-weight: 700; font-size: 13.5px;
  white-space: nowrap;
}
.format--best .format__go { background: var(--grad); border-color: transparent; color: #fff; }

.note {
  display: flex; gap: 10px;
  padding: 13px 14px;
  border-radius: var(--r-sm);
  background: rgba(59, 130, 246, .08);
  border: 1px solid rgba(59, 130, 246, .22);
  color: var(--text-dim);
  font-size: 13.5px;
  line-height: 1.6;
}
.note .icon { flex: none; margin-top: 2px; color: var(--c1); }
.note--warn { background: rgba(245, 158, 11, .08); border-color: rgba(245, 158, 11, .25); }
.note--warn .icon { color: var(--warn); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  white-space: nowrap;
  min-height: 46px;
  padding: 0 20px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  font-weight: 700; font-size: 14.5px;
  cursor: pointer;
  transition: filter .15s var(--ease), transform .15s var(--ease);
}
.btn:hover  { filter: brightness(1.12); }
.btn:active { transform: scale(.98); }
.btn--primary { background: var(--grad); border-color: transparent; color: #fff; }
.btn--ghost   { background: transparent; }
.btn--block   { width: 100%; }
.btn--sm      { min-height: 40px; padding: 0 15px; font-size: 13px; }
.btn--danger  { background: rgba(244, 63, 94, .14); border-color: rgba(244, 63, 94, .4); color: #ffc2cd; }

/* --------------------------------------------------------------------------
   Advertisement zones
   -------------------------------------------------------------------------- */
.ad-zone {
  display: block;
  margin-block: 26px;
  padding: 10px;
  border: 1px dashed var(--border);
  border-radius: var(--r);
  background: rgba(255, 255, 255, .015);
  /* min-height is set inline per slot so the space is reserved before the ad
     script loads - this is what keeps layout shift out of Core Web Vitals. */
  overflow: hidden;
}
.ad-zone__label {
  display: block;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
  text-align: center;
  margin-bottom: 7px;
}
.ad-zone__body { min-width: 0; overflow: hidden; }
.ad-zone--flush { margin-block: 16px; }

/* --------------------------------------------------------------------------
   Footer + bottom tab bar
   -------------------------------------------------------------------------- */
.site-footer {
  margin-top: 36px;
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(12, 22, 48, .6), rgba(5, 10, 24, .9));
  padding-top: 34px;
  /* keeps the last row clear of the fixed mobile tab bar */
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 22px);
}

.footer-grid { display: grid; gap: 26px; }
.footer-col h4 {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 12px; font-weight: 700;
}
.footer-col a, .footer-col p {
  display: flex; align-items: center;
  color: var(--text-dim);
  font-size: 14px;
  /* comfortable tap target on a phone */
  min-height: 40px;
  padding-block: 6px;
}
.footer-col a:hover { color: var(--c1); }

.footer-about p { color: var(--text-dim); font-size: 14px; margin-top: 12px; max-width: 44ch; }

.socials { display: flex; gap: 9px; margin-top: 14px; }
.socials a {
  width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-dim);
}
.socials a:hover { color: var(--text); border-color: var(--border-strong); }

.footer-bottom {
  margin-top: 28px; padding-top: 18px;
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 10px 18px;
  align-items: center; justify-content: space-between;
  color: var(--text-faint); font-size: 12.5px;
}
.footer-legal { max-width: 70ch; line-height: 1.6; }

.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: rgba(6, 12, 28, .93);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-top: 1px solid var(--border);
}
.tabbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: var(--text-faint);
  font-size: 10.5px; font-weight: 650;
  min-width: 0; padding: 6px 2px;
  text-align: center;
}
.tabbar a span {
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tabbar a[aria-current="page"] { color: var(--c1); }
.tabbar a[aria-current="page"] .icon { filter: drop-shadow(0 0 9px rgba(34, 211, 238, .6)); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 16px; }
.form-row { display: grid; gap: 7px; }
.form-row label { font-size: 13.5px; font-weight: 650; color: var(--text-dim); }
.form-row .help { font-size: 12.5px; color: var(--text-faint); line-height: 1.5; }
.form-row .err  { font-size: 12.5px; color: #ff9db0; }

.input, .select, .textarea {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: 12px 13px;
  font-size: 16px;
  min-height: 48px;
  transition: border-color .15s var(--ease);
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--c2); outline: none; }
.textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger); }

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239db0d6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}

.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.check input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--c2); }
.check span { font-size: 14px; color: var(--text-dim); }

.flash { display: grid; gap: 10px; margin-bottom: 18px; }
.flash div {
  padding: 13px 15px; border-radius: var(--r-sm); font-size: 14px; line-height: 1.5;
  display: flex; gap: 10px; align-items: flex-start;
}
.flash .success { background: rgba(34, 197, 94, .12);  border: 1px solid rgba(34, 197, 94, .3);  color: #c6f6d5; }
.flash .error   { background: rgba(244, 63, 94, .12);  border: 1px solid rgba(244, 63, 94, .3);  color: #ffd5dc; }
.flash .info    { background: rgba(59, 130, 246, .12); border: 1px solid rgba(59, 130, 246, .3); color: #d3e4ff; }

/* --------------------------------------------------------------------------
   Error / maintenance
   -------------------------------------------------------------------------- */
.state {
  text-align: center;
  padding: 60px 20px;
  max-width: 560px;
  margin-inline: auto;
}
.state__code {
  font-size: clamp(58px, 18vw, 96px);
  font-weight: 900; letter-spacing: -0.05em;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  line-height: 1;
}
.state h1 { font-size: 22px; margin-top: 12px; }
.state p  { color: var(--text-dim); margin-top: 12px; font-size: 15px; }
.state .btn { margin-top: 24px; }
.state pre {
  text-align: left; margin-top: 22px; padding: 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: 12px; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere;
  color: var(--text-faint);
}

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */
@media (min-width: 560px) {
  .feature {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 12px;
    padding: 16px 14px;
  }

  .field { flex-direction: row; align-items: center; }
  .field__input { flex: 1 1 auto; min-width: 0; }
  .btn-download { flex: none; }
  .features { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 780px) {
  .wrap { padding-inline: 24px; }
  .section { padding-block: 60px; }
  .hero { padding-top: 52px; }
  .hero__grid { grid-template-columns: 1.05fr .95fr; align-items: center; gap: 30px; }
  .hero__art { display: block; }
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .downloader__inner { padding: 18px; }
  .media-card { display: grid; grid-template-columns: 340px 1fr; }
  .media-card__thumb { height: 100%; aspect-ratio: auto; min-height: 200px; }
  .media-card__body { padding: 22px; }
  .media-card__title { font-size: 20px; }
}

@media (min-width: 960px) {
  .nav-toggle { display: none; }
  .nav-drawer { display: none !important; }
  .nav-desktop {
    display: flex; align-items: center; gap: 4px;
    margin-left: auto;
  }
  .nav-desktop a {
    padding: 9px 14px;
    border-radius: var(--r-pill);
    color: var(--text-dim);
    font-size: 14.5px; font-weight: 650;
  }
  .nav-desktop a:hover { color: var(--text); background: var(--surface-2); }
  .nav-desktop a[aria-current="page"] { color: var(--text); background: var(--surface-2); }

  .tabbar { display: none; }
  .site-footer { padding-bottom: 30px; }

  .layout-with-rail { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
  .rail { position: sticky; top: calc(var(--nav-h) + 20px); }
}

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

@media print {
  .site-header, .tabbar, .ad-zone, .site-footer, .downloader { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   Motion layer
   Everything below is decoration. It is additive - the layout above renders
   identically with animation switched off - and the whole block is disabled
   under prefers-reduced-motion at the end of this file.
   ========================================================================== */

@keyframes fv-spin      { to   { transform: rotate(1turn); } }
@keyframes fv-float     { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-9px) } }
@keyframes fv-float-alt { 0%,100% { transform: translateY(0) } 50% { transform: translateY(7px) } }
@keyframes fv-pulse     { 0%,100% { opacity: .55; transform: scale(1) } 50% { opacity: 1; transform: scale(1.06) } }
@keyframes fv-rise      { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: none } }
@keyframes fv-sweep     { from { background-position: 0% 50% } to { background-position: 200% 50% } }
@keyframes fv-shimmer   { from { transform: translateX(-120%) } to { transform: translateX(220%) } }
@keyframes fv-blink     { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* ---------------------------------------------------------------- RGB ring
   The animated border around the downloader. A conic gradient is spun inside
   a rounded, clipped box, so only a thin rim of it ever shows.
   -------------------------------------------------------------------------- */
.downloader__shell {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: transparent;
}
.downloader__shell::before {
  content: "";
  position: absolute;
  inset: -60%;
  z-index: -2;
  background: conic-gradient(
    from 0deg,
    #22d3ee, #3b82f6, #8b5cf6, #d946ef, #f43f5e, #f59e0b, #22d3ee
  );
  animation: fv-spin 7s linear infinite;
}
/* A soft coloured halo cast outside the box. */
.downloader__shell::after {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: -1;
  border-radius: inherit;
  box-shadow: 0 0 50px -6px rgba(59, 130, 246, .55);
  animation: fv-pulse 4.5s ease-in-out infinite;
  pointer-events: none;
}
.downloader__inner { position: relative; z-index: 1; }

/* The ring speeds up and brightens while the field has focus. */
.downloader__shell:focus-within::before { animation-duration: 2.6s; }
.downloader__shell:focus-within::after  { box-shadow: 0 0 70px -4px rgba(139, 92, 246, .75); }

/* ------------------------------------------------------------ hero heading */
.hero h1 .grad-text {
  background: linear-gradient(100deg, #22d3ee, #3b82f6, #a855f7, #ec4899, #22d3ee);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: fv-sweep 9s linear infinite;
}

/* ------------------------------------------------------------ download btn */
.btn-download {
  position: relative;
  overflow: hidden;
  background: linear-gradient(100deg, #22d3ee, #3b82f6, #a855f7, #3b82f6, #22d3ee);
  background-size: 200% auto;
  animation: fv-sweep 6s linear infinite;
}
.btn-download::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: translateX(-120%);
  animation: fv-shimmer 3.4s ease-in-out infinite;
  pointer-events: none;
}
.btn-download[data-busy="true"]::after { animation: none; opacity: 0; }

/* -------------------------------------------------------------- brand mark */
.brand__mark { transition: transform .35s var(--ease), filter .35s var(--ease); }
.brand:hover .brand__mark { transform: rotate(-6deg) scale(1.08); filter: drop-shadow(0 0 12px rgba(59,130,246,.7)); }

.brand__tld {
  background: linear-gradient(100deg, #22d3ee, #3b82f6, #a855f7, #22d3ee);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: fv-sweep 7s linear infinite;
}

/* ----------------------------------------------------------- platform chips */
.chip { transition: transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease); }
.chip:hover { transform: translateY(-3px); border-color: var(--border-strong); }
.chip__dot { transition: transform .22s var(--ease), box-shadow .22s var(--ease); }
.chip--youtube   .chip__dot { box-shadow: 0 4px 14px -4px rgba(255, 61, 61, .8); }
.chip--facebook  .chip__dot { box-shadow: 0 4px 14px -4px rgba(24, 119, 242, .8); }
.chip--instagram .chip__dot { box-shadow: 0 4px 14px -4px rgba(225, 48, 108, .8); }
.chip--youtube:hover   .chip__dot { box-shadow: 0 0 18px rgba(255, 61, 61, .9); transform: scale(1.12); }
.chip--facebook:hover  .chip__dot { box-shadow: 0 0 18px rgba(24, 119, 242, .9); transform: scale(1.12); }
.chip--instagram:hover .chip__dot { box-shadow: 0 0 18px rgba(225, 48, 108, .9); transform: scale(1.12); }

/* ----------------------------------------------------------- platform tiles */
.platform { position: relative; overflow: hidden; }
.platform::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(220px 120px at 50% 0%, rgba(59,130,246,.16), transparent 70%);
  opacity: 0;
  transition: opacity .3s var(--ease);
  pointer-events: none;
}
.platform:hover::before { opacity: 1; }
.platform__tile { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.platform--youtube   .platform__tile { box-shadow: 0 8px 22px -10px rgba(225, 29, 29, .85); }
.platform--facebook  .platform__tile { box-shadow: 0 8px 22px -10px rgba(11, 95, 208, .85); }
.platform--instagram .platform__tile { box-shadow: 0 8px 22px -10px rgba(238, 42, 123, .85); }
.platform:hover .platform__tile { transform: translateY(-4px) scale(1.06); }
.platform--youtube:hover   .platform__tile { box-shadow: 0 0 30px -4px rgba(225, 29, 29, .9); }
.platform--facebook:hover  .platform__tile { box-shadow: 0 0 30px -4px rgba(11, 95, 208, .9); }
.platform--instagram:hover .platform__tile { box-shadow: 0 0 30px -4px rgba(238, 42, 123, .9); }

/* ------------------------------------------------------------ feature strip */
.feature__icon { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.feature:hover .feature__icon { transform: translateY(-3px) scale(1.07); }
.feature__icon--lime   { box-shadow: 0 6px 20px -7px rgba(34, 197, 94, .95); }
.feature__icon--blue   { box-shadow: 0 6px 20px -7px rgba(59, 130, 246, .95); }
.feature__icon--teal   { box-shadow: 0 6px 20px -7px rgba(20, 184, 166, .95); }
.feature__icon--violet { box-shadow: 0 6px 20px -7px rgba(139, 92, 246, .95); }

/* ----------------------------------------------------------------- hero art */
.hero-art__tile    { animation: fv-float 5.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.hero-art__tile--b { animation: fv-float-alt 6.4s ease-in-out infinite; }
.hero-art__tile--c { animation: fv-float 7.2s ease-in-out infinite .6s; }
.hero-art__tile--d { animation: fv-float-alt 5s ease-in-out infinite .3s; }
.hero-art__dash    { animation: fv-blink 3s ease-in-out infinite; }
.hero-art__screen  { animation: fv-pulse 5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }

/* ------------------------------------------------------------ result rows */
.format { position: relative; overflow: hidden; }
.format::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
  transform: translateX(-130%);
  pointer-events: none;
}
.format:hover::after { animation: fv-shimmer 1s ease-out; }
.format--best .format__badge { animation: fv-pulse 3.6s ease-in-out infinite; }

/* --------------------------------------------------------- scroll reveal
   The opacity:0 is applied by app.js only when IntersectionObserver exists,
   so content is never left invisible if the script fails to run.
   -------------------------------------------------------------------------- */
.js-reveal [data-reveal] { opacity: 0; }
.js-reveal [data-reveal].is-visible { animation: fv-rise .6s var(--ease) forwards; }
[data-reveal-delay="1"] { animation-delay: .08s !important; }
[data-reveal-delay="2"] { animation-delay: .16s !important; }
[data-reveal-delay="3"] { animation-delay: .24s !important; }
[data-reveal-delay="4"] { animation-delay: .32s !important; }
[data-reveal-delay="5"] { animation-delay: .40s !important; }

/* ------------------------------------------------------------------ tab bar */
.tabbar a .icon { transition: transform .25s var(--ease); }
.tabbar a:active .icon { transform: scale(.86); }

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .downloader__shell::before,
  .downloader__shell::after,
  .btn-download,
  .btn-download::after,
  .hero h1 .grad-text,
  .brand__tld,
  .hero-art__tile,
  .hero-art__tile--b,
  .hero-art__tile--c,
  .hero-art__tile--d,
  .hero-art__dash,
  .hero-art__screen,
  .format--best .format__badge,
  .format:hover::after {
    animation: none !important;
  }
  .downloader__shell::before { background: var(--grad); }
  .btn-download { background: var(--grad); }
  .js-reveal [data-reveal] { opacity: 1; }
}

/* Pointer spotlight - coordinates are set by app.js on hover-capable devices. */
.platform::before,
.feature::before,
.step::before,
.format::before {
  --mx: 50%;
  --my: 0%;
}
.feature, .step { position: relative; overflow: hidden; }
.feature::before, .step::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(180px 140px at var(--mx) var(--my), rgba(99, 160, 255, .13), transparent 70%);
  opacity: 0;
  transition: opacity .28s var(--ease);
  pointer-events: none;
}
.feature:hover::before, .step:hover::before { opacity: 1; }
.platform::before { background: radial-gradient(220px 160px at var(--mx) var(--my), rgba(99, 160, 255, .18), transparent 72%); }

/* Solid marks sit slightly larger inside the circular tile. */
.feature__icon .icon { width: 22px; height: 22px; }

/* ==========================================================================
   Hero cover
   Either an image the site owner uploaded in the admin panel, or - when none
   is set - three slow light beams that give the section the same depth
   without shipping a photograph.
   ========================================================================== */
.hero { position: relative; isolation: isolate; }

.hero__cover,
.hero__beams {
  position: absolute;
  inset: -1px 0 auto 0;
  height: 100%;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.hero__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Two layers: a flat dim so the photo never fights the text, and a vertical
   fade so the hero melts into the page instead of ending on a hard edge. */
.hero__scrim {
  --dim: .58;
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(5, 10, 24, .35) 0%,
      rgba(5, 10, 24, .55) 45%,
      var(--bg) 100%),
    linear-gradient(90deg,
      rgba(5, 10, 24, .92) 0%,
      rgba(5, 10, 24, .55) 55%,
      rgba(5, 10, 24, .25) 100%),
    rgba(5, 10, 24, var(--dim));
}

/* On a phone the text sits over the whole width, so the horizontal fade is
   replaced by a stronger flat dim. */
@media (max-width: 779px) {
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(5,10,24,.55) 0%, rgba(5,10,24,.7) 55%, var(--bg) 100%),
      rgba(5, 10, 24, calc(var(--dim) + .12));
  }
}

.hero--has-cover .hero__art { opacity: .9; }

/* --------------------------------------------------------------- beams */
.hero__beams i {
  position: absolute;
  top: -40%;
  width: 42vw;
  max-width: 520px;
  height: 180%;
  border-radius: 50%;
  filter: blur(64px);
  opacity: .5;
}
.hero__beams i:nth-child(1) { left: -12%;  background: radial-gradient(closest-side, rgba(34,211,238,.55), transparent); animation: fv-beam 14s ease-in-out infinite; }
.hero__beams i:nth-child(2) { left: 32%;   background: radial-gradient(closest-side, rgba(59,130,246,.50), transparent); animation: fv-beam 18s ease-in-out infinite reverse; }
.hero__beams i:nth-child(3) { right: -14%; background: radial-gradient(closest-side, rgba(168,85,247,.50), transparent); animation: fv-beam 16s ease-in-out infinite 2s; }

@keyframes fv-beam {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(4%, 3%, 0) scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__beams i { animation: none !important; }
}