<!DOCTYPE html>
<html lang="{{ lang }}">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>SSS TikTok — TikTok Downloader (No Watermark)</title>
  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;700;800&display=swap"
    rel="stylesheet">


  <style>
    :root {
      /* Base Theme (unchanged for rest of page) */
      --indigo: #4f46e5;
      --purple: #7c3aed;
      --purple-2: #a855f7;
      --ink: #0f1220;
      --muted: #6b7280;
      --line: #ececf3;
      --card: #ffffff;
      --max: 1100px;
      --shadow: 0 10px 24px rgba(16, 24, 40, .08);



      .hero-ss {
        --grad: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 40%, #ec4899 100%);
        color: #fff;
        background: var(--grad);
        padding: 18px 18px 60px;
        position: relative;
        /* IMPORTANT: allow dropdown to appear above hero */
        overflow: visible;
        z-index: 0;
      }

      /* SnapTik-style hero colors */
      --snap-start:#0b3c5d;
      /* deep teal/blue */
      --snap-mid:#116a72;
      --snap-end:#1a9a7f;
      --snap-grad: linear-gradient(140deg, var(--snap-start) 0%, var(--snap-mid) 45%, var(--snap-end) 100%);
      --snap-pill:#ffffff;
      --snap-pill-text:#0f1220;
      --snap-chip:#0ea5a5;

      /* FIX: no green — use brand indigo for primary button */
      --snap-download: var(--indigo);
    }



    body {
      font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    body {
      font-family: Inter, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      background: #f7f7fb;
      color: #1f2430;
      line-height: 1.6
    }

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

    a {
      text-decoration: none;
      color: inherit
    }

    /* ===================== SNAP HERO ===================== */
    .hero-ss {
      background: var(--snap-grad);
      color: #fff;
      padding: 18px 18px 64px;
      position: relative;
      overflow: visible;
      z-index: 0;
    }

    .hero-ss__top {
      max-width: var(--max);
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px
    }

    /* NEW: cluster for menu + logo (keeps logo on the left) */
    .hero-ss__left {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .hero-ss__logo {
      display: flex;
      align-items: center;
      gap: 8px
    }

    /* Keep your pill nav but deemphasize it (hidden on small) */
    .hero-ss__pillnav {
      background: rgba(255, 255, 255, .14);
      color: #fff;
      border-radius: 14px;
      padding: 6px 8px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, .15);
      display: inline-block;

    }

    .pill-track {
      position: relative;
      display: flex;
      gap: 4px;
      align-items: center;
    }

    .pill {
      appearance: none;
      border: 0;
      background: transparent;
      cursor: pointer;
      color: #fff;
      font-weight: 800;
      font-size: 14px;
      padding: 8px 12px;
      border-radius: 10px;
      position: relative;
      z-index: 1;
      text-decoration: none;
      transition: transform .12s ease, color .12s ease;
      opacity: .92;
    }

    .pill:hover {
      transform: translateY(-1px);
    }

    .pill.active {
      color: #fff;
    }

    .pill-thumb {
      position: absolute;
      top: 5px;
      left: 0;
      height: calc(100% - 10px);
      width: 0;
      border-radius: 8px;
      background: rgba(255, 255, 255, .18);
      transition: transform .22s cubic-bezier(.2, .7, .3, 1), width .22s cubic-bezier(.2, .7, .3, 1);
      will-change: transform, width;
    }

    .hero-ss__controls {
      display: flex;
      align-items: center;
      gap: 8px
    }

    .hero-ss__lang,
    .hero-ss__theme {
      background: rgba(255, 255, 255, .15);
      color: #fff;
      border: 1px solid rgba(255, 255, 255, .25);
      backdrop-filter: blur(6px);
      font-weight: 700;
      cursor: pointer;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .hero-ss__lang {
      padding: 10px 14px;
    }

    .hero-ss__theme {
      width: 42px;
      height: 42px;
      justify-content: center;
      line-height: 0;
    }

    /* ===== NEW: mobile-only menu button ===== */
    .mobile-menu-btn {
      display: none;
      /* hidden on desktop */
      width: 42px;
      height: 42px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, .35);
      background: rgba(255, 255, 255, .15);
      color: #fff;
      font-weight: 800;
      font-size: 18px;
      cursor: pointer;
      place-items: center;
      line-height: 0;
      backdrop-filter: blur(6px);
    }

    @media (max-width:1024px) {
      .mobile-menu-btn {
        display: grid;
      }

      /* show on mobile + tablet */
    }


    /* ===== NEW: mobile drawer with nav links ===== */
    .mobile-nav {
      position: fixed;
      inset: 0 0 auto 0;
      /* top overlay */
      background: rgba(0, 0, 0, .35);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(255, 255, 255, .18);
      transform: translateY(-100%);
      opacity: 0;
      pointer-events: none;
      transition: transform .28s cubic-bezier(.2, .7, .3, 1), opacity .2s ease;
      z-index: 60;
      padding: 12px 14px 18px;
    }

    .mobile-nav.open {
      transform: translateY(0);
      opacity: 1;
      pointer-events: auto;
    }

    .mobile-nav__inner {
      max-width: var(--max);
      margin: 0 auto;
      padding-top: 60px;
    }

    .mobile-nav__links {
      list-style: none;
      display: grid;
      gap: 10px;
    }

    .mobile-nav__link a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: rgba(255, 255, 255, .16);
      border: 1px solid rgba(255, 255, 255, .22);
      color: #fff;
      font-weight: 800;
      padding: 12px 14px;
      border-radius: 12px;
    }

    .mobile-nav__link a:hover {
      background: #fff;
      color: #0f1220;
    }

    .mobile-nav__close {
      position: absolute;
      right: 14px;
      top: 14px;
      width: 42px;
      height: 42px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      cursor: pointer;
      border: 1px solid rgba(255, 255, 255, .35);
      background: rgba(255, 255, 255, .15);
      color: #fff;
      font-weight: 800;
    }

    @media (min-width:769px) {
      .mobile-nav {
        display: none;
      }
    }

    /* never on desktop */

    /* Center block */
    .hero-center {
      max-width: 980px;
      margin: 66px auto 0;
      text-align: center;
      padding: 0 12px;
    }

    .hero-brand {
      font-size: 56px;
      line-height: 1.05;
      font-weight: 800;
      letter-spacing: .5px
    }

    .hero-sub {
      opacity: .95;
      font-weight: 700;
      font-size: 22px;
      margin-top: 8px
    }

    /* Space below the hero subheading */
    .hero-sub {
      margin-top: 8px;
      margin-bottom: clamp(14px, 2.5vw, 28px);
    }

    /* Extra gap before tabs */
    .mode-tabs {
      margin-top: clamp(10px, 1.8vw, 24px);
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 10px;
      max-width: 560px;
      margin-left: auto;
      margin-right: auto;
    }

    /* Form spacing */
    .snap-form {
      margin-top: clamp(14px, 2vw, 28px);
    }

    /* Buttons */
    .mode-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      white-space: nowrap;
      border: 0;
      font-weight: 800;
      font-size: 15px;
      padding: 10px 14px;
      border-radius: 10px;
      cursor: pointer;
      color: #ffffff;
      background: rgba(255, 255, 255, 0.16);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      transition: background .15s ease, color .15s ease, transform .12s ease, box-shadow .15s ease, -webkit-backdrop-filter .15s ease, backdrop-filter .15s ease;
    }

    .mode-btn:hover {
      transform: translateY(-1px);
      background: #ffffff;
      color: #0f1220;
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
    }

    .mode-btn[aria-pressed="true"] {
      background: #ffffff;
      color: #0f1220;
      box-shadow: 0 6px 16px rgba(0, 0, 0, .10) inset, 0 2px 8px rgba(0, 0, 0, .06);
      border: 1px solid rgba(0, 0, 0, 0.06);
    }

    .mode-btn:focus-visible {
      outline: 2px solid rgba(0, 0, 0, .25);
      outline-offset: 2px;
      border-radius: 12px;
    }

    /* Mobile tweaks for tab bar and mode buttons */
    @media (max-width: 480px) {
      .mode-tabs {
        gap: 8px;
        max-width: 100%;
        padding: 0 8px;
      }
      .mode-btn {
        font-size: 14px;
        padding: 9px 12px;
        border-radius: 12px;
      }
    }

    .mode-buttons {
      padding-bottom: 120px;
    }

    .spacer {
      height: 50px;
      background: transparent;
    }

    /* Input row */
    .snap-form {
      margin: 10px auto 0;
      display: flex;
      align-items: center;
      gap: 12px;
      background: #fff;
      border-radius: 14px;
      padding: 8px;
      max-width: 860px;
      box-shadow: 0 14px 28px rgba(0, 0, 0, .22);
    }

    .snap-form input {
      flex: 1;
      border: 0;
      outline: 0;
      padding: 14px;
      border-radius: 10px;
      font-size: 15px;
      color: #111827
    }

    .snap-actions {
      display: flex;
      gap: 8px
    }

    /* Input-group wraps the URL field and the paste button.  The paste button will sit inside the input field on
     * small screens but remain inline on larger screens.  Without this wrapper the paste button could overlap the
     * download button on mobile devices. */
    .input-group {
      position: relative;
      flex: 1;
    }
    .input-group input {
      width: 100%;
    }
    .input-group .btn-ghost {
      position: absolute;
      top: 50%;
      right: 12px;
      transform: translateY(-50%);
      padding: 4px 10px;
      font-size: 14px;
      gap: 6px;
    }

    .btn-ghost,
    .btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 0;
      cursor: pointer;
      padding: 10px 14px;
      border-radius: 10px;
      font-weight: 800;
      transition: .15s transform ease;
    }

    .btn-ghost {
      background: #eef2ff;
      color: rgba(0, 0, 0, 0.533)
    }

    .btn-primary {
      background: var(--snap-download);
      color: #fff
    }

    .btn-ghost:hover,
    .btn-primary:hover {
      transform: translateY(-1px)
    }

    @media (max-width:720px) {
      .hero-brand {
        font-size: 40px
      }

      .hero-sub {
        font-size: 18px
      }

      .snap-form {
        flex-direction: column;
        align-items: stretch
      }

      .snap-actions {
        justify-content: space-between
      }

      /* Move the mode tabs below the input on mobile and position the paste
       * button within the input.  These rules mirror the behaviour on
       * other pages. */
      .hero-center {
        display: flex;
        flex-direction: column;
      }
      .hero-center .snap-form {
        order: 1;
      }
      .hero-center .mode-tabs {
        order: 2;
      }
      .snap-form {
        position: relative;
      }
      .input-group input {
        padding-right: 100px;
      }
      .snap-actions {
        width: 100%;
        margin-top: 8px;
      }
      .input-group .btn-ghost {
        /* Keep paste button aligned inside input on mobile */
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        padding: 4px 10px;
        font-size: 14px;
      }
      .snap-actions .btn-primary {
        width: 100%;
      }

      /* Minimise white space on small screens */
      .spacer {
        height: 16px;
      }

      /* tabs hidden on mobile via rule above */
    }

    /* ===== SECTION WRAPPER (unchanged below) ===== */
    .section {
      padding: 46px 16px
    }

    .wrap {
      max-width: var(--max);
      margin: 0 auto
    }

    .title {
      text-align: center;
      font-size: 36px;
      font-weight: 800;
      color: var(--ink);
      margin: 8px 0 18px
    }

    .title span {
      background: linear-gradient(135deg, var(--purple), var(--purple-2));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent
    }

    .steps {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      margin-top: 10px
    }

    .step {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 14px;
      box-shadow: var(--shadow)
    }

    .step-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px
    }

    .num {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      font-weight: 800;
      color: #7c3aed;
      background: rgba(124, 58, 237, .10)
    }

    .corner-ico {
      font-size: 16px;
      color: #a1a1b0
    }

    .step h3 {
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 6px
    }

    .step p {
      color: #595a67;
      font-size: 13.5px
    }

    .cta {
      display: flex;
      justify-content: center;
      margin: 18px 0 8px
    }

    .btn {
      background: #2563eb;
      color: #fff;
      border: 0;
      border-radius: 999px;
      padding: 12px 18px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 8px 18px rgba(37, 99, 235, .25)
    }

    .features {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
      margin-top: 12px
    }

    .feature {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 14px;
      align-items: start;
      background: #fff;
      border: 1px solid #e7d4fa;
      border-radius: 16px;
      padding: 18px;
      box-shadow: var(--shadow)
    }

    .ico {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: rgba(124, 58, 237, .08)
    }

    .feature h4 {
      font-size: 20px;
      font-weight: 800;
      margin-bottom: 6px
    }

    .feature p {
      color: #5e5f6c;
      font-size: 14px
    }

    @media (max-width:1024px) {
      .steps {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    @media (max-width:560px) {
      .title {
        font-size: 28px
      }

      .steps {
        grid-template-columns: 1fr
      }

      .features {
        grid-template-columns: 1fr
      }
    }

    .why-choose {
      background: #d8d8de;
      padding: 56px 16px
    }

    .wc-wrap {
      max-width: var(--max);
      margin: 0 auto
    }

    .wc-title {
      text-align: center;
      font-size: 34px;
      font-weight: 800;
      margin-bottom: 34px;
      color: var(--ink)
    }

    .wc-title span {
      background: linear-gradient(135deg, var(--purple), var(--indigo));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent
    }

    .wc-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 28px;
      align-items: start
    }

    .wc-item {
      text-align: center;
      padding: 6px 6px 0;
      opacity: 0;
      transform: translateY(12px)
    }

    .wc-item.reveal {
      opacity: 1;
      transform: translateY(0);
      transition: .45s ease
    }

    .wc-icon {
      width: 64px;
      height: 64px;
      margin: 0 auto 14px;
      display: grid;
      place-items: center;
      border-radius: 18px;
      background: #fff;
      box-shadow: 0 6px 18px rgba(79, 70, 229, .15);
      border: 1px solid rgba(79, 70, 229, .15)
    }

    .wc-item h3 {
      font-size: 18px;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 6px
    }

    .wc-item p {
      font-size: 14.5px;
      color: var(--muted);
      max-width: 260px;
      margin: 0 auto 6px
    }

    @media (max-width:1024px) {
      .wc-grid {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    @media (max-width:560px) {
      .wc-grid {
        grid-template-columns: 1fr
      }

      .wc-title {
        font-size: 28px
      }
    }

    .faq-sec {
      padding: 56px 16px
    }

    .faq-wrap {
      max-width: 920px;
      margin: 0 auto
    }

    .faq-title {
      font-size: 36px;
      font-weight: 800;
      text-align: center;
      color: var(--ink);
      margin-bottom: 8px
    }

    .faq-sub {
      text-align: center;
      color: var(--muted);
      margin-bottom: 26px
    }

    .faq-list {
      border-top: 1px solid var(--line)
    }

    .faq-item {
      border-bottom: 1px solid var(--line)
    }

    .faq-btn {
      width: 100%;
      background: #F5F5F9;
      border: 0;
      text-align: left;
      cursor: pointer;
      padding: 18px 6px;
      display: flex;
      align-items: center;
      gap: 12px;
      justify-content: space-between;
      font-weight: 700;
      color: #1f2430
    }

    .faq-btn:hover {
      background: #fafafa
    }

    .faq-btn .ico {
      width: 22px;
      height: 22px;
      flex: 0 0 auto;
      stroke: url(#grad-stroke);
      stroke-width: 2;
      fill: none;
      transform: rotate(0);
      transition: transform .2s
    }

    .faq-panel {
      max-height: 0;
      overflow: hidden;
      color: #6b7280;
      padding: 0;
      transition: max-height .3s ease, padding .3s ease, opacity .2s ease;
      opacity: .9
    }

    .faq-btn[aria-expanded="true"]+.faq-panel {
      max-height: 200px;
      padding: 0 0 16px
    }

    .faq-btn[aria-expanded="true"] .ico {
      transform: rotate(45deg)
    }

    /* Footer */
    .ft {
      background: linear-gradient(135deg, #b06bff 0%, #8a75ff 45%, #e17bff 100%);
      color: #111827;
      padding: 40px 18px 26px;
      border-top-left-radius: 20px;
      border-top-right-radius: 20px
    }

    .ft-wrap {
      max-width: var(--max);
      margin: 0 auto 22px;
      display: grid;
      grid-template-columns: 2fr 1fr 1.5fr;
      gap: 26px;
      align-items: start
    }

    .ft-about p {
      color: #1a1433;
      opacity: .9;
      line-height: 1.7;
      max-width: 340px
    }

    .ft-links h6,
    .ft-newsletter h6 {
      font-size: 12px;
      letter-spacing: .12em;
      font-weight: 800;
      color: #1a1433;
      opacity: .9;
      margin-bottom: 14px
    }

    .ft-links ul {
      list-style: none;
      display: grid;
      gap: 12px
    }

    .ft-links a {
      color: #111827;
      font-weight: 600
    }

    .ft-links a:hover {
      text-decoration: underline
    }

    .ft-form {
      display: grid;
      gap: 10px
    }

    .ft-form input {
      padding: 12px 14px;
      border-radius: 10px;
      border: none;
      outline: none;
      background: #fff;
      color: #111827;
      font-weight: 500;
      box-shadow: 0 2px 0 rgba(0, 0, 0, .04) inset
    }

    .ft-form button {
      border: none;
      cursor: pointer;
      font-weight: 700;
      padding: 12px 14px;
      border-radius: 10px;
      background: var(--indigo);
      color: #fff;
      box-shadow: 0 6px 18px rgba(79, 70, 229, .28);
      transition: transform .15s
    }

    .ft-form button:hover {
      transform: translateY(-1px)
    }

    .ft-msg {
      display: block;
      margin-top: 6px;
      min-height: 18px;
      color: #0b3d0b;
      font-weight: 600
    }

    .ft-msg.error {
      color: #5f0b0b
    }

    .ft-line {
      max-width: var(--max);
      margin: 20px auto;
      border: none;
      height: 1px;
      background: rgba(255, 255, 255, .55)
    }

    .ft-copy {
      text-align: center;
      color: #1a1433;
      font-weight: 600;
      opacity: .95
    }

    /* FIX: stack footer earlier for better responsiveness */
    @media (max-width:980px) {
      .ft-wrap {
        grid-template-columns: 1fr 1fr
      }
    }

    @media (max-width:780px) {
      .ft-wrap {
        grid-template-columns: 1fr
      }

      .ft-about p {
        max-width: none
      }

      .ft-form {
        grid-template-columns: 1fr
      }
    }

    /* Force heading colors you asked to keep */
    .step h3.always-black,
    [data-theme="dark"] .step h3.always-black {
      color: #4F46E5 !important;
      -webkit-text-fill-color: #4F46E5 !important;
    }

    .feature h4.always-purple,
    [data-theme="dark"] .feature h4.always-purple {
      color: #4F46E5 !important;
      -webkit-text-fill-color: #4F46E5 !important;
    }

    /* Language popup */
    .lang-wrap {
      position: relative;
      display: flex;
      align-items: center;
    }

    .lang-pop {
      position: absolute;
      right: 0;
      top: calc(100% + 10px);
      width: clamp(320px, 56vw, 520px);
      background: #fff;
      color: #0f1220;
      border: 1px solid rgba(0, 0, 0, .08);
      border-left: 6px solid #C13584;
      border-radius: 14px;
      box-shadow: 0 16px 40px rgba(0, 0, 0, .18);
      padding: 8px;
      z-index: 100;
      opacity: 0;
      transform: translateY(-6px);
      pointer-events: none;
      transition: opacity .18s ease, transform .18s ease;
      max-height: 420px;
      overflow: auto;
    }

    .lang-wrap.open .lang-pop {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    .lang-pop[hidden] {
      display: none;
    }

    .lang-wrap.open .hero-ss__lang svg {
      transform: rotate(180deg);
    }

    .lang-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      border-radius: 10px;
      overflow: hidden;
      background: #fff;
    }

    .lang-list li {
      list-style: none;
      border-bottom: 1px solid #eee;
    }

    .lang-list li:nth-child(odd) {
      border-right: 1px solid #eee;
    }

    .lang-opt {
      width: 100%;
      text-align: left;
      background: transparent;
      border: 0;
      cursor: pointer;
      padding: 10px 12px;
      font-weight: 600;
      color: #111827;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .lang-opt:hover {
      background: #f3f4f6;
    }

    .lang-opt .check {
      opacity: 0;
      color: #C13584;
      font-weight: 800;
      margin-left: 12px;
    }

    .lang-opt[aria-selected="true"] {
      background: #fde7f3;
      color: #C13584;
    }

    .lang-opt[aria-selected="true"] .check {
      opacity: 1;
    }

    @media (max-width:560px) {
      .lang-pop {
        width: min(92vw, 420px)
      }

      .lang-list {
        grid-template-columns: 1fr
      }

      .lang-list li:nth-child(odd) {
        border-right: 0
      }
    }

    /* Dark theme support */
    [data-theme="dark"] .snap-form {
      background: #101828;
      box-shadow: 0 14px 28px rgba(0, 0, 0, .35);
    }

    [data-theme="dark"] .snap-form input {
      color: #f1f5f9;
      background: #0f172a;
    }

    [data-theme="dark"] body {
      background: #12162a;
      color: #eef0ff;
    }

    [data-theme="dark"] .hero-ss {
      --grad: linear-gradient(135deg, #1a1550 0%, #3c2f9a 40%, #7b3fa4 100%);
    }

    [data-theme="dark"] .hero-ss__pillnav {
      background: rgba(255, 255, 255, .12);
    }

    [data-theme="dark"] .pill {
      color: #e9e9ff;
    }

    [data-theme="dark"] .pill.active {
      color: #111827;
    }

    [data-theme="dark"] .pill-thumb {
      background: rgba(255, 255, 255, .16);
    }

    [data-theme="dark"] .hero-ss__center p {
      color: #d7d9ff;
    }

    [data-theme="dark"] .hero-ss__search {
      background: #1a1f3a;
      box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
    }

    [data-theme="dark"] .hero-ss__search input {
      color: #f1f5f9;
    }

    [data-theme="dark"] .lang-pop {
      background: #0f1228;
      color: #e9e9ff;
      border-color: #23264a;
    }

    [data-theme="dark"] .lang-list li {
      border-color: #262a55;
    }

    [data-theme="dark"] .lang-opt:hover {
      background: #ffffff;
    }

    [data-theme="dark"] .lang-opt[aria-selected="true"] {
      background: #1a2060;
      color: #fcfcfd;
    }

    [data-theme="dark"] .lang-opt .check {
      color: #cfd2ff;
    }

    .step h3.always-black,
    [data-theme="dark"] .step h3.always-black {
      color: #4F46E5 !important;
      -webkit-text-fill-color: #4F46E5 !important;
    }

    .feature h4.always-purple,
    [data-theme="dark"] .feature h4.always-purple {
      color: #4F46E5 !important;
      -webkit-text-fill-color: #4F46E5 !important;
    }
  </style>
  <!-- Additional overrides for preview page -->
  <style>
    /* Featured mode button styling */
    .mode-btn.featured {
      background: var(--snap-download);
      color: #ffffff;
      font-weight: 700;
    }

    /* Loading overlay styles */
    .loading-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.8);
      z-index: 2000;
    }
    .loading-overlay[hidden] {
      display: none;
    }
    .spinner {
      border: 4px solid rgba(0, 0, 0, 0.1);
      border-top: 4px solid var(--snap-download);
      border-radius: 50%;
      width: 40px;
      height: 40px;
      animation: spin 1s linear infinite;
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    /* Reduce hero spacing on small screens */
    @media (max-width: 768px) {
      .hero-center {
        margin: 30px auto 0;
      }
    }

    /* Hide FAQ section and extra spacers on the preview page */
    .faq-section, .faq-sec, .spacer {
      display: none !important;
    }
  </style>
</head>

<body>

  <!-- Include Reusable Navbar -->
  {% include 'navbar.html' %}

  <!-- ========================= HERO ========================= -->
  <section class="hero-ss">

    <!-- Add this inside <head> -->
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400&family=Poppins:wght@200;300;400&display=swap"
      rel="stylesheet">

    <style>
      .hero-sub {
        font-family: 'Roboto', sans-serif;
        font-weight: 300;
        font-size: 18px;
        color: #ffffff;
      }

      .mode-btn {
        font-family: 'Poppins', sans-serif;
        font-weight: 300;
        font-size: 15px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
    </style>

    <div class="hero-center">
      <!-- Use translated generic brand and tagline on preview page -->
      <h1 class="hero-brand">{{ translations.hero_brand }}</h1>
      <p class="hero-sub">{{ translations.hero_sub }}</p>

      <!-- Mode Tabs (hidden on mobile by CSS above) -->
      <div class="mode-tabs" role="tablist" aria-label="Download mode">
        {# Reordered tool buttons for consistency with other pages #}
        <a class="mode-btn" href="{{ url_for('story_viewer_mode', lang=lang) }}">{{ translations.story_viewer }}</a>
        <a class="mode-btn" href="{{ url_for('story_downloader', lang=lang) }}">{{ translations.story_downloader }}</a>
        <a class="mode-btn" href="{{ url_for('mp3_page', lang=lang) }}">{{ translations.download_mp3_full }}</a>
        <a class="mode-btn" href="{{ url_for('photos_page', lang=lang) }}">{{ translations.photo }}</a>
        <a class="mode-btn featured" href="{{ url_for('video_page', lang=lang) }}">{{ translations.video_nowm }}</a>
      </div>

      <div class="spacer"></div>

      <!-- Your form (unchanged behavior) -->
      <form class="snap-form" id="heroSearch" action="{{ url_for('index', lang=lang) }}" method="POST" novalidate
        data-preview-url="/{{ lang }}/preview">
        <input type="hidden" name="mode" id="modeField" value="video" />
        <div class="input-group">
          <input id="ssUrl" name="url" type="url" placeholder="{{ translations.paste_placeholder }}" required pattern="https?://.+" />
          <button type="button" id="ssPaste" class="btn-ghost" aria-label="Paste from clipboard">
            <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
              <path
                d="M9 3h6l1 2h2a2 2 0 0 1 2 2v3M7 5h2m-2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V10m-5-5h-4"
                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
            </svg>
            {{ translations.paste }}
          </button>
        </div>
        <div class="snap-actions">
          <button type="submit" id="ssSubmit" class="btn-primary">
            <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
              <!-- Use a download arrow icon instead of a search icon -->
              <path d="M12 5v10m0 0l-4-4m4 4l4-4M5 20h14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
            {{ translations.download }}
          </button>
        </div>
      </form>
    </div>
  </section>





















































  <!-- ================== PREVIEW CARD (MOBILE RESPONSIVE) ================== -->
  <style>
    /* Card shell */
    .result-wrap {
      max-width: 1100px;
      margin: 28px auto;
      padding: 0 14px;
    }

    .result-card {
      background: #f5f3ff;
      border: 1px solid #e6e2ff;
      border-radius: 18px;
      box-shadow: 0 10px 22px rgba(16, 24, 40, .08);
      padding: 18px;
      overflow: hidden;
    }

    /* Two-column layout, becomes single-column on mobile */
    .result-grid {
      display: grid;
      grid-template-columns: 280px 1fr;
      gap: 18px;
      align-items: start;
    }

    @media (max-width: 900px) {
      .result-grid {
        grid-template-columns: 240px 1fr;
      }
    }

    @media (max-width: 720px) {
      .result-grid {
        grid-template-columns: 200px 1fr;
      }
    }

    /* Stack layout on mobile screens */
    @media (max-width: 600px) {
      .result-grid {
        grid-template-columns: 1fr;
      }
    }

    /* Left media */
    .media-box {
      position: relative;
      border-radius: 16px;
      overflow: hidden;
      background: #000;
    }

    .media-box .square {
      width: 100%;
      aspect-ratio: 1 / 1;
    }

    .media-badge {
      position: absolute;
      right: 10px;
      top: 10px;
      background: rgba(0, 0, 0, .72);
      color: #fff;
      font-weight: 700;
      font-size: 12px;
      padding: 3px 8px;
      border-radius: 8px;
    }

    .media-play {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      pointer-events: none;
    }

    .media-play svg {
      filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .45));
    }

    /* Hide native controls for muted video */
    .media-box video::-webkit-media-controls,
    .media-box video::-webkit-media-controls-enclosure,
    .media-box video::-webkit-media-controls-panel {
      display: none !important;
    }

    /* Slideshow controls overlay */
    .slide-ctrls {
      position: absolute;
      inset: auto 0 0 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 6px 8px;
      background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .55));
      color: #fff;
      gap: 8px;
    }

    .slide-btn {
      appearance: none;
      border: 0;
      border-radius: 10px;
      background: rgba(255, 255, 255, .18);
      color: #fff;
      font-weight: 800;
      padding: 8px 10px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .slide-btn:hover {
      background: rgba(255, 255, 255, .28);
    }

    .slide-ind {
      font-weight: 800;
      opacity: .95;
    }

    /* Right column */
    .rc-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }

    .rc-creator {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .rc-avatar {
      width: 42px;
      height: 42px;
      border-radius: 999px;
      background: #e8e9ff;
      display: grid;
      place-items: center;
      font-weight: 800;
    }

    .rc-handle {
      color: #6b7280;
      font-size: .9rem;
      margin-top: -2px;
    }

    .rc-share {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      background: #fff;
      border: 1px solid #ececf3;
      display: grid;
      place-items: center;
      cursor: pointer;
      transition: transform .1s, box-shadow .15s;
    }

    .rc-share:hover {
      transform: translateY(-1px);
      box-shadow: 0 8px 18px rgba(0, 0, 0, .12);
    }

    .rc-title {
      font-weight: 800;
      font-size: 1.35rem;
      margin: .55rem 0 .35rem;
    }

    .rc-desc {
      color: #475569;
      margin-bottom: .9rem;
      line-height: 1.55;
    }

    /* Button panel */
    .rc-panel {
      background: #efeaff;
      border-radius: 14px;
      padding: 12px;
    }

    .rc-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    @media (max-width: 420px) {
      .rc-actions {
        grid-template-columns: 1fr;
      }
    }

    .rc-btn {
      height: 52px;
      border: 0;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-weight: 800;
      color: #fff;
      background: #6c5ce7;
      text-decoration: none;
      box-shadow: 0 10px 22px rgba(108, 92, 231, .25);
      transition: transform .1s, box-shadow .15s, background .12s;
    }

    .rc-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 14px 26px rgba(108, 92, 231, .45);
      background: #7b6cf1;
    }

    .rc-btn svg {
      filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .10));
    }

    @media (max-width: 420px) {
      .rc-title {
        font-size: 1.05rem;
      }

      .rc-desc {
        font-size: .9rem;
      }

      .rc-btn {
        height: 48px;
        font-size: .95rem;
      }
    }

    /* Hide utility */
    .hide {
      display: none !important;
    }
  </style>

  <div class="result-wrap">
    <div class="result-card">
      <div class="result-grid">
        <!-- LEFT: media area -->
        <div class="media-box" id="mediaBox" data-type="{{ media_type }}" data-count="{{ image_count|int }}"
          data-file="{{ file_id }}">
          <div class="square">
            <video id="pvVideo" src="{{ url_for('serve_video', file_id=file_id) }}" playsinline preload="metadata" muted
              poster="{{ preview_image }}"
              class="{{ '' if media_type != 'slideshow' else 'hide' }}"
              style="width:100%;height:100%;object-fit:cover;background:#000"></video>

            <img id="pvImage" src="{{ url_for('inline_photo', file_id=file_id, idx=1) }}" alt="{{ title }}"
              class="{{ '' if media_type == 'slideshow' else 'hide' }}"
              style="width:100%;height:100%;object-fit:cover;display:block;border-radius:0">
          </div>

          {% if duration_str %}<div class="media-badge">{{ duration_str }}</div>{% endif %}

          <div class="media-play" aria-hidden="true">
            <svg width="64" height="64" viewBox="0 0 66 66" fill="none">
              <circle cx="33" cy="33" r="30" fill="white" opacity="0.85" />
              <path d="M27 22v22l18-11-18-11z" fill="#111827" />
            </svg>
          </div>

          <div id="slideCtrls" class="slide-ctrls {{ '' if media_type == 'slideshow' else 'hide' }}">
            <button class="slide-btn" id="prevSlide" type="button">‹ Prev</button>
            <div class="slide-ind"><span id="curIdx">1</span>/<span id="maxIdx">{{ image_count|int }}</span></div>
            <div style="display:flex; gap:8px">
              <button class="slide-btn" id="toggleAuto" type="button" aria-pressed="false">► Auto</button>
              <button class="slide-btn" id="nextSlide" type="button">Next ›</button>
            </div>
          </div>
        </div>

        <!-- RIGHT: meta + actions -->
        <div>
          <div class="rc-top">
            <div class="rc-creator">
              <div class="rc-avatar">{{ (uploader_name or 'U')[:1]|upper }}</div>
              <div>
                <div class="fw-bold">{{ uploader_name or 'Unknown User' }}</div>
                <div class="rc-handle">@{{ uploader_handle or 'unknown' }}</div>
              </div>
            </div>

            <button class="rc-share" id="shareBtn" title="Copy share link" aria-label="Copy share link">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                <path d="M7 12l5-5m0 0l5 5m-5-5v10" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                  stroke-linejoin="round" />
              </svg>
            </button>
          </div>

          <h3 class="rc-title">{{ title }}</h3>
          <p class="rc-desc">{{ description or "No description available." }}</p>

          <div class="rc-panel">
            <div class="rc-actions" id="actionGrid">
              <!-- New action buttons: Without Watermark HD, Without Watermark MP4, MP3 Download and Download Another -->
              <a class="rc-btn {{ '' if media_type != 'slideshow' else 'hide' }}" id="btnHd"
                href="{{ url_for('download_video', file_id=file_id) }}">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                  <path d="M12 3v12m0 0l-4-4m4 4l4-4M5 20h14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
                {{ translations.without_watermark_hd }}
              </a>

              <a class="rc-btn {{ '' if media_type != 'slideshow' else 'hide' }}" id="btnMp4"
                href="{{ url_for('download_video', file_id=file_id) }}">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                  <path d="M12 3v12m0 0l-4-4m4 4l4-4M5 20h14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
                {{ translations.without_watermark_mp4 }}
              </a>

              <a class="rc-btn {{ '' if has_audio else 'hide' }}" id="btnMp3"
                href="{{ url_for('download_audio', file_id=file_id) }}">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                  <path d="M9 18V5l10-2v13" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
                  <circle cx="6" cy="18" r="3" stroke="currentColor" stroke-width="2" />
                  <circle cx="18" cy="16" r="3" stroke="currentColor" stroke-width="2" />
                </svg>
                {{ translations.download_mp3_full }}
              </a>

              <a class="rc-btn" href="{{ url_for('index', lang=lang) }}">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                  <path d="M4 12h16M10 6l-6 6 6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
                {{ translations.download_another }}
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Share button -->
  <script>
    (function () {
      const btn = document.getElementById('shareBtn');
      if (!btn) return;
      btn.addEventListener('click', async () => {
        const link = "{{ url_for('serve_video', file_id=file_id, _external=True) }}";
        try {
          await navigator.clipboard.writeText(link);
          btn.innerHTML = '✓';
          setTimeout(() => btn.innerHTML =
            '<svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M7 12l5-5m0 0l5 5m-5-5v10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'
            , 1200);
        } catch (e) {
          alert('Copy failed. Link: ' + link);
        }
      });
    })();
  </script>

  <!-- Slideshow logic -->
  <script>
    (function () {
      const box = document.getElementById('mediaBox');
      if (!box || box.dataset.type !== 'slideshow') return;

      const max = Math.max(1, parseInt(box.dataset.count || '1', 10));
      const imgEl = document.getElementById('pvImage');
      const curEl = document.getElementById('curIdx');
      const btnPrev = document.getElementById('prevSlide');
      const btnNext = document.getElementById('nextSlide');
      const btnAuto = document.getElementById('toggleAuto');
      const dlPhoto = document.getElementById('btnPhotoDl');

      let idx = 1;
      let timer = null;
      const AUTO_MS = 2500;

      const PHOTO_BASE = "{{ url_for('inline_photo', file_id=file_id, idx=1) }}";
      const PHOTO_DL_BASE = "{{ url_for('download_single_photo', file_id=file_id, idx=1) }}";
      function repLastNum(url, i) { return url.replace(/\/(\d+)(\?.*)?$/, '/' + i + (RegExp.$2 || '')); }
      function urlFor(i) { return repLastNum(PHOTO_BASE, i); }
      function urlForDl(i) { return repLastNum(PHOTO_DL_BASE, i); }

      function render() {
        curEl.textContent = String(idx);
        imgEl.src = urlFor(idx);
        if (dlPhoto) {
          dlPhoto.href = urlForDl(idx);
          dlPhoto.innerHTML = `
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
          <path d="M12 5v8m0 0l-3-3m3 3l3-3M5 20h14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        Download Photo ${idx}
      `;
        }
      }
      function next() { idx = (idx % max) + 1; render(); }
      function prev() { idx = (idx - 2 + max) % max + 1; render(); }

      function start() {
        if (timer) return;
        btnAuto.setAttribute('aria-pressed', 'true');
        btnAuto.textContent = '❚❚ Auto';
        timer = setInterval(next, AUTO_MS);
      }
      function stop() {
        if (timer) { clearInterval(timer); timer = null; }
        btnAuto.setAttribute('aria-pressed', 'false');
        btnAuto.textContent = '► Auto';
      }

      btnNext.addEventListener('click', () => { stop(); next(); });
      btnPrev.addEventListener('click', () => { stop(); prev(); });
      btnAuto.addEventListener('click', () => (timer ? stop() : start()));

      render();
    })();
  </script>


  <div class="spacer"></div>
  <div class="spacer"></div>
  <div class="spacer"></div>
  <div class="spacer"></div>
  <div class="spacer"></div>
  <div class="spacer"></div>
  <div class="spacer"></div>
  <div class="spacer"></div>
  <div class="spacer"></div>
  <div class="spacer"></div>
  <div class="spacer"></div>
  <div class="spacer"></div>
  <div class="spacer"></div>
  <div class="spacer"></div>
  <div class="spacer"></div>
  <div class="spacer"></div>
  <!-- ===== FAQ ===== -->
  <section class="faq-sec" id="faq">
    <div class="faq-wrap">
      <h2 class="faq-title">Frequently Asked Questions</h2>
      <p class="faq-sub">Quick answers about downloading TikTok videos without watermark.</p>
      <div class="faq-list">
        <!-- Item 1 -->
        <article class="faq-item">
          <button class="faq-btn" aria-expanded="false" aria-controls="pvfaq1">
            <span>How Can I Download TikTok Videos Without a Watermark?</span>
            <svg class="ico" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12 5v14M5 12h14" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
          </button>
          <div class="faq-panel" id="pvfaq1">
            <p>You can download TikTok videos without a watermark easily using SSSTikTok. The built in TikTok watermark
              remover ensures clean, logo free clips that look original and ready for reposting. Just paste your video
              link, choose the "No Logo" option, and save the file. It's quick, safe, and completely free for every
              user.</p>
          </div>
        </article>

        <!-- Item 2 -->
        <article class="faq-item">
          <button class="faq-btn" aria-expanded="false" aria-controls="pvfaq2">
            <span>Is This TikTok Video Downloader Safe and Secure?</span>
            <svg class="ico" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12 5v14M5 12h14" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
          </button>
          <div class="faq-panel" id="pvfaq2">
            <p>Yes, SSSTikTok is a safe TikTok downloader that prioritizes user privacy. All secure TikTok download
              sessions are encrypted, keeping your data protected. Built as a privacy first tool, it doesn't store
              personal information or history. You can use it confidently on any device without worrying about leaks or
              intrusive ads.</p>
          </div>
        </article>

        <!-- Item 3 -->
        <article class="faq-item">
          <button class="faq-btn" aria-expanded="false" aria-controls="pvfaq3">
            <span>Does the Tool Work on All Devices, Like iPhone, Android, and PC?</span>
            <svg class="ico" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12 5v14M5 12h14" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
          </button>
          <div class="faq-panel" id="pvfaq3">
            <p>Absolutely. SSSTikTok is a cross platform TikTok downloader built for universal access. Whether you're on
              Android, iPhone, PC, or Mac, it works flawlessly in any browser. For viewing stories or private browsing,
              you can also try the <a href="https://ssstiktok.cc/tiktok-story-viewer" target="_blank"
                rel="noopener noreferrer">TikTok Story Viewer</a>, available on all devices.</p>
          </div>
        </article>

        <!-- Item 4 -->
        <article class="faq-item">
          <button class="faq-btn" aria-expanded="false" aria-controls="pvfaq4">
            <span>Is It Free to Use and Are There Any Limits?</span>
            <svg class="ico" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12 5v14M5 12h14" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
          </button>
          <div class="faq-panel" id="pvfaq4">
            <p>SSSTikTok is a 100% free TikTok downloader that allows unlimited downloads. There are no restrictions,
              daily caps, or hidden charges. You can save as many videos as you want using this online TikTok
              downloader, making it ideal for frequent users who value convenience and unlimited access without the need
              for registration.</p>
          </div>
        </article>

        <!-- Item 5 -->
        <article class="faq-item">
          <button class="faq-btn" aria-expanded="false" aria-controls="pvfaq5">
            <span>Can I Save TikTok Audio or MP3 Files Using This Downloader?</span>
            <svg class="ico" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12 5v14M5 12h14" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
          </button>
          <div class="faq-panel" id="pvfaq5">
            <p>Yes, with SSSTikTok, you can easily extract sound using the TikTok MP3 converter feature. It enables
              quick downloads of TikTok audio and MP3 extraction from any clip. Perfect for creators, this option lets
              you reuse trending sounds, background music, or voice tracks in high quality MP3 format for editing or
              offline listening.</p>
          </div>
        </article>

        <!-- Item 6 -->
        <article class="faq-item">
          <button class="faq-btn" aria-expanded="false" aria-controls="pvfaq6">
            <span>Can I Reuse or Repost Downloaded TikTok Videos?</span>
            <svg class="ico" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12 5v14M5 12h14" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
          </button>
          <div class="faq-panel" id="pvfaq6">
            <p>Yes, all saved clips are watermark free, allowing TikTok reposting and TikTok editing use. Since
              SSSTikTok provides watermark free TikTok downloads, you can reuse them for personal edits, reels, or
              offline sharing. Always credit the original creators when reposting to maintain fair content usage and
              adhere to community guidelines.</p>
          </div>
        </article>

      </div>
    </div>
  </section>

  <!-- ===== FOOTER (kept) ===== -->
  <footer class="ft">
    <div class="ft-wrap">
      <div class="ft-about">
        <div class="ft-logo" aria-label="Brand">
          <img src="{{ url_for('static', filename='SSSTiktok.png') }}" alt="Logo" width="250" height="70">
        </div>
        <p>Clarity gives you the blocks and components you need to create a truly professional website.</p>
      </div>

      <nav class="ft-links" aria-label="Footer navigation">
        <h6>PAGES</h6>
        <ul>
          <li><a href="{{ url_for('contact') }}">Contact Us</a></li>
          <li><a href="{{ url_for('about') }}">About</a></li>
          <li><a href="{{ url_for('terms') }}">Terms &amp; Conditions</a></li>
          <li><a href="{{ url_for('privacy') }}">Privacy Policy</a></li>
        </ul>
      </nav>

      <div class="ft-newsletter">
        <h6>NEWSLETTER</h6>
        <form id="ftForm" class="ft-form" novalidate>
          <input type="email" id="ftEmail" placeholder="Enter your email address" required />
          <button type="submit">Subscribe Now</button>
        </form>
        <small id="ftMsg" class="ft-msg" aria-live="polite"></small>
      </div>
    </div>

    <hr class="ft-line" />
    <div class="ft-copy">© <span id="ftYear"></span> SSS Tiktok — All Rights Reserved</div>
  </footer>

  <script>
    // ===== Theme Toggle (kept) =====
    (function () {
      const themeBtn = document.getElementById('themeBtn');
      const THEMES = { light: 'light', dark: 'dark' };
      function applyTheme(t) {
        document.documentElement.setAttribute('data-theme', t);
        localStorage.setItem('site_theme', t);
        if (themeBtn) themeBtn.textContent = (t === THEMES.dark) ? '⏾' : '☀';
      }
      const savedTheme = localStorage.getItem('site_theme');
      const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
      applyTheme(savedTheme || (prefersDark ? THEMES.dark : THEMES.light));
      themeBtn?.addEventListener('click', () => {
        const current = document.documentElement.getAttribute('data-theme') || THEMES.light;
        applyTheme(current === THEMES.dark ? THEMES.light : THEMES.dark);
      });
    })();

    // ===== Auto‑scroll to results =====
    // When navigating to the preview page from the search form the hero
    // remains at the top.  To focus the user’s attention on the download
    // results we automatically scroll the viewport to the result card
    // shortly after the page loads.
    (function () {
      const wrap = document.querySelector('.result-wrap');
      if (!wrap) return;
      // delay scroll until layout is ready
      window.requestAnimationFrame(() => {
        setTimeout(() => {
          wrap.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }, 100);
      });
    })();

    // ===== Pill Nav Thumb + Active State (kept) =====
    (function () {
      const nav = document.getElementById('pillnav'); if (!nav) return;
      const track = nav.querySelector('.pill-track');
      const thumb = nav.querySelector('.pill-thumb');
      const pills = Array.from(nav.querySelectorAll('.pill'));

      function fileFromHref(href) {
        try {
          const u = new URL(href, location.href);
          const last = (u.pathname.split('/').pop() || 'index.html').toLowerCase();
          return last === '' ? 'index.html' : last;
        } catch { return 'index.html'; }
      }
      function moveThumb(el, animate = true) {
        if (!el || !thumb || !track) return;
        const r = el.getBoundingClientRect();
        const pr = track.getBoundingClientRect();
        const left = r.left - pr.left;
        const width = r.width;
        if (!animate) {
          const t = thumb.style.transition;
          thumb.style.transition = 'none';
          thumb.style.transform = `translateX(${left}px)`;
          thumb.style.width = `${width}px`;
          requestAnimationFrame(() => { thumb.style.transition = t || ''; });
        } else {
          thumb.style.transform = `translateX(${left}px)`;
          thumb.style.width = `${width}px`;
        }
      }
      function setActiveFromLocation() {
        const current = fileFromHref(location.href);
        let active = pills.find(a => fileFromHref(a.href) === current);
        if (!active) active = pills[0];
        pills.forEach(a => { a.classList.toggle('active', a === active); a.removeAttribute('aria-current'); });
        active.setAttribute('aria-current', 'page');
        moveThumb(active, false);
      }
      const init = () => setActiveFromLocation();
      if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
      else init();
      let raf;
      const onResize = () => { cancelAnimationFrame(raf); raf = requestAnimationFrame(() => moveThumb(nav.querySelector('.pill.active'), false)); };
      window.addEventListener('resize', onResize, { passive: true });
      window.addEventListener('orientationchange', onResize);
      if (document.fonts && document.fonts.ready) { document.fonts.ready.then(onResize).catch(() => { }); }
      pills.forEach((pill, idx) => {
        pill.addEventListener('keydown', (e) => {
          if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
            e.preventDefault();
            const next = e.key === 'ArrowRight' ? (pills[idx + 1] || pills[0]) : (pills[idx - 1] || pills[pills.length - 1]);
            next.focus();
          }
        });
        pill.addEventListener('mouseenter', () => moveThumb(pill, true));
        pill.addEventListener('focus', () => moveThumb(pill, true));
      });
      nav.addEventListener('mouseleave', () => moveThumb(nav.querySelector('.pill.active'), true));
      nav.addEventListener('focusout', (e) => { if (!nav.contains(e.relatedTarget)) { moveThumb(nav.querySelector('.pill.active'), true); } });
    })();

    // ===== Language Popup (kept) =====
    (function () {
      const wrap = document.querySelector('.lang-wrap');
      const btn = document.getElementById('langBtn');
      const pop = document.getElementById('langPop');
      const list = document.getElementById('langList');
      const label = document.getElementById('langLabel');

      function openPop(open) {
        wrap.classList.toggle('open', open);
        btn.setAttribute('aria-expanded', String(open));
        if (open) { pop.hidden = false; } else { setTimeout(() => pop.hidden = true, 120); }
      }
      function selectByCode(code) {
        const opt = list.querySelector(`.lang-opt[data-code="${code}"]`);
        if (!opt) return false;
        list.querySelectorAll('.lang-opt').forEach(o => o.setAttribute('aria-selected', 'false'));
        opt.setAttribute('aria-selected', 'true');
        label.textContent = opt.textContent.replace('✓', '').trim();
        return true;
      }
      const savedLang = localStorage.getItem('site_lang');
      if (savedLang && selectByCode(savedLang)) { } else {
        const pathLang = (location.pathname.split('/')[1] || '').toLowerCase();
        if (!selectByCode(pathLang)) {
          const pre = list.querySelector('.lang-opt[aria-selected="true"]') || list.querySelector('.lang-opt');
          if (pre) {
            pre.setAttribute('aria-selected', 'true');
            label.textContent = pre.textContent.replace('✓', '').trim();
          }
        }
      }
      btn.addEventListener('click', () => openPop(!wrap.classList.contains('open')));
      list.addEventListener('click', (e) => {
        const opt = e.target.closest('.lang-opt'); if (!opt) return;
        list.querySelectorAll('.lang-opt').forEach(o => o.setAttribute('aria-selected', 'false'));
        opt.setAttribute('aria-selected', 'true');
        label.textContent = opt.textContent.replace('✓', '').trim();
        localStorage.setItem('site_lang', opt.dataset.code);
        openPop(false);
      });
      list.addEventListener('keydown', (e) => {
        const opts = Array.from(list.querySelectorAll('.lang-opt'));
        const i = opts.indexOf(document.activeElement);
        if (e.key === 'Escape') { openPop(false); btn.focus(); }
        if (e.key === 'ArrowDown') { e.preventDefault(); (opts[i + 1] || opts[0]).focus(); }
        if (e.key === 'ArrowUp') { e.preventDefault(); (opts[i - 1] || opts.at(-1)).focus(); }
        if (e.key === 'Enter' || e.key === ' ') { document.activeElement.click(); }
      });
      btn.addEventListener('keydown', (e) => {
        if (['Enter', ' ', 'ArrowDown'].includes(e.key)) {
          e.preventDefault(); openPop(true);
          requestAnimationFrame(() => list.querySelector('.lang-opt[aria-selected="true"]')?.focus());
        }
      });
      document.addEventListener('click', (e) => { if (!wrap.contains(e.target)) openPop(false); });
      document.addEventListener('keydown', (e) => { if (e.key === 'Escape') openPop(false); });
    })();

    // ===== Mode tabs: set hidden field only (kept server flow) =====
    (function () {
      const field = document.getElementById('modeField');
      const btns = document.querySelectorAll('.mode-btn');
      btns.forEach(b => {
        b.addEventListener('click', () => {
          btns.forEach(x => x.setAttribute('aria-pressed', 'false'));
          b.setAttribute('aria-pressed', 'true');
          field.value = b.dataset.mode || 'video';
        });
      });
    })();

    // ===== Auto-redirect + Paste (kept behavior) =====
    (function () {
      const pasteBtn = document.getElementById('ssPaste');
      const input = document.getElementById('ssUrl');
      const form = document.getElementById('heroSearch');
      const submit = document.getElementById('ssSubmit');

      let isRedirecting = false;
      let inputTimer = null;
      const TYPE_DEBOUNCE_MS = 600;
      const REDIRECT_DELAY_MS = 2000;

      function isValidUrl(v) { return /^https?:\/\/.+/i.test(v || ''); }
      function setLoading() {
        // Show a loading overlay during link processing
        const overlay = document.getElementById('loadingOverlay');
        if (overlay) {
          overlay.hidden = false;
        }
        if (submit) {
          submit.disabled = true;
          if (!submit.dataset._old) { submit.dataset._old = submit.innerHTML; }
          submit.innerHTML = 'Preparing preview…';
        }
      }
      function redirectToPreview(url) {
        if (isRedirecting) return;
        isRedirecting = true;
        const target = (form?.dataset.previewUrl) || '/preview';
        setTimeout(() => { window.location.href = `${target}?url=${encodeURIComponent(url)}`; }, REDIRECT_DELAY_MS);
      }
      function maybeRedirect(val) {
        const clean = (val || '').trim();
        if (isValidUrl(clean)) {
          setLoading();
          redirectToPreview(clean);
        }
      }
      pasteBtn?.addEventListener('click', async () => {
        try {
          const txt = await navigator.clipboard.readText();
          input.value = (txt || '').trim();
          maybeRedirect(input.value);
          if (!isRedirecting && !isValidUrl(input.value)) { input.focus(); alert('Please paste a valid TikTok URL.'); }
        } catch {
          alert('Clipboard not available. Paste with Ctrl/⌘+V.');
          input.focus();
        }
      });
      input?.addEventListener('paste', () => { setTimeout(() => { maybeRedirect(input.value); }, 0); });
      input?.addEventListener('input', () => {
        if (isRedirecting) return;
        clearTimeout(inputTimer);
        inputTimer = setTimeout(() => { maybeRedirect(input.value); }, TYPE_DEBOUNCE_MS);
      });
      form?.addEventListener('submit', (e) => {
        e.preventDefault();
        if (isRedirecting) return;
        const val = (input.value || '').trim();
        if (!isValidUrl(val)) {
          input.reportValidity?.();
          input.focus();
          return;
        }
        setLoading();
        redirectToPreview(val);
      });
    })();

    // Scroll reveal + FAQ (kept)
    (function () { const btn = document.getElementById('getStartedBtn'); btn?.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' })); })();
    (function () {
      function initReveal() {
        const items = document.querySelectorAll('.wc-item');
        if (!items.length) return;
        if ('IntersectionObserver' in window) {
          const io = new IntersectionObserver((entries, obs) => {
            entries.forEach(entry => {
              if (entry.isIntersecting) {
                entry.target.classList.add('reveal');
                obs.unobserve(entry.target);
              }
            });
          }, { threshold: 0.2, rootMargin: '0px 0px -10% 0px' });
          items.forEach(el => io.observe(el));
        } else {
          items.forEach(el => el.classList.add('reveal'));
        }
      }
      if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initReveal);
      } else { initReveal(); }
    })();
    (function () {
      const items = document.querySelectorAll('.faq-item');
      items.forEach((it, i) => {
        const btn = it.querySelector('.faq-btn');
        if (!btn) return;
        if (i === 0) btn.setAttribute('aria-expanded', 'true');
        btn.addEventListener('click', () => {
          const open = btn.getAttribute('aria-expanded') === 'true';
          items.forEach(other => { const b = other.querySelector('.faq-btn'); if (b && b !== btn) b.setAttribute('aria-expanded', 'false'); });
          btn.setAttribute('aria-expanded', String(!open));
        });
      });
    })();

    // Footer year (kept)
    document.getElementById('ftYear').textContent = new Date().getFullYear();
    (function () {
      const form = document.getElementById('ftForm');
      const emailEl = document.getElementById('ftEmail');
      const msg = document.getElementById('ftMsg');
      if (!form) return;
      form.addEventListener('submit', async e => {
        e.preventDefault();
        const email = (emailEl.value || '').trim();
        const ok = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
        if (!ok) {
          msg.textContent = 'Please enter a valid email.';
          msg.classList.add('error');
          return;
        }
        msg.classList.remove('error');
        try {
          const res = await fetch('/subscribe', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ email }),
          });
          const data = await res.json();
          if (res.ok && data.status === 'ok') {
            msg.textContent = 'Thanks! You are subscribed.';
            form.reset();
          } else {
            msg.textContent = (data && data.message) || 'There was a problem. Please try again later.';
            msg.classList.add('error');
          }
        } catch (err) {
          msg.textContent = 'There was a problem. Please try again later.';
          msg.classList.add('error');
        }
      });
    })();

    /* ===== NEW: Mobile menu JS ===== */
    (function () {
      const btn = document.getElementById('menuBtn');
      const drawer = document.getElementById('mobileNav');
      const closeBtn = document.getElementById('menuClose');
      if (!btn || !drawer) return;

      function openMenu() {
        drawer.classList.add('open');
        drawer.setAttribute('aria-hidden', 'false');
        btn.setAttribute('aria-expanded', 'true');
        document.body.style.overflow = 'hidden';
      }
      function closeMenu() {
        drawer.classList.remove('open');
        drawer.setAttribute('aria-hidden', 'true');
        btn.setAttribute('aria-expanded', 'false');
        document.body.style.overflow = '';
      }
      btn.addEventListener('click', openMenu);
      closeBtn?.addEventListener('click', closeMenu);
      document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && drawer.classList.contains('open')) closeMenu(); });
      drawer.addEventListener('click', (e) => {
        const inner = drawer.querySelector('.mobile-nav__inner');
        if (inner && !inner.contains(e.target)) closeMenu();
      });
    })();
  </script>
  <!-- Loading overlay for form submission on the preview page -->
  <div id="loadingOverlay" class="loading-overlay" hidden>
    <div class="spinner"></div>
  </div>
</body>

</html>