<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <title>InstaSave — Instagram Video Downloader (Reels & Posts)</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet"/>

  <style>
    :root{
      /* Instagram-inspired theme */
      --pink:#F56040;
      --orange:#FCAF45;
      --yellow:#FFDC80;
      --purple:#833AB4;
      --magenta:#C13584;
      --ink:#0f1220;
      --muted:#6b7280;
      --line:#ececf3;
      --card:#ffffff;
      --max:1100px;
      --shadow:0 10px 24px rgba(16,24,40,.08);
      --grad: radial-gradient(1200px 900px at 0% 0%, #FFDC80 0%, #FCAF45 20%, #F56040 45%, #C13584 70%, #833AB4 100%);
    }
    *{box-sizing:border-box;margin:0;padding:0}
    body{font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:#f8f9ff;color:#1f2430;line-height:1.6}
    img{max-width:100%;display:block}
    a{text-decoration:none;color:inherit}

    /* ===== HERO ===== */
    .hero-ss{
      color:#fff; background:var(--grad); padding:18px 18px 64px; position:relative; overflow:hidden;
      isolation:isolate;
    }
    .hero-ss::after{
      content:""; position:absolute; inset:0; background:
        radial-gradient(600px 420px at 85% 10%, rgba(255,255,255,.18), transparent 60%),
        radial-gradient(800px 560px at 10% 100%, rgba(255,255,255,.12), transparent 60%);
      pointer-events:none; z-index:-1;
    }
    .hero-ss__top{max-width:var(--max); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px}
    .hero-ss__logo{display:flex; align-items:center; gap:10px; font-weight:800}
    .hero-ss__logo-badge{
      width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.3);
      box-shadow:0 6px 18px rgba(0,0,0,.18);
    }

    /* Pill Nav */
    .hero-ss__pillnav{
      --bgpill:#ffffff; --textpill:#0f1220;
      background:var(--bgpill); color:var(--textpill);
      border-radius:14px; padding:8px;
      box-shadow:0 10px 24px rgba(16,24,40,.12);
      display:inline-block;
    }
    .pill-track{ position:relative; display:flex; gap:4px; align-items:center; }
    .pill{
      appearance:none; border:0; background:transparent; cursor:pointer;
      color:#000; font-weight:800; font-size:16px;
      padding:10px 16px; border-radius:10px; position:relative; z-index:1;
      text-decoration:none; transition:transform .12s ease, color .12s ease;
    }
    .pill:hover{ transform:translateY(-1px); }
    .pill:active{ transform:translateY(0) scale(.98); }
    .pill.active{ color:#C13584; }
    .pill:focus-visible{ outline:2px solid #fdfdfd; outline-offset:2px; border-radius:12px; }
    .pill-thumb{
      position:absolute; top:6px; left:0;
      height:calc(100% - 10px); width:0; border-radius:8px;
      box-shadow:inset 0 0 0 2px rgba(0,0,0,.06);
      transition:transform .22s cubic-bezier(.2,.7,.3,1), width .22s cubic-bezier(.2,.7,.3,1);
      will-change:transform,width;
      background:linear-gradient(135deg, rgba(255,220,128,.55), rgba(252,175,69,.55), rgba(245,96,64,.55), rgba(193,53,132,.55), rgba(131,58,180,.55));
      backdrop-filter:blur(4px);
    }

    .hero-ss__lang{display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.15); color:#fff; border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:10px 14px; font-weight:700; cursor:pointer; backdrop-filter:blur(6px)}
    .hero-ss__theme{display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.15); color:#fff; border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:10px; font-weight:700; cursor:pointer; backdrop-filter:blur(6px); margin-right:8px; width:42px; height:42px; line-height:0; font-size:16px}
    .hero-ss__center{max-width:900px; margin:60px auto 0; text-align:center}
    .hero-ss__eyebrow{
      display:inline-flex; gap:8px; align-items:center; font-weight:800; background:rgba(255,255,255,.18);
      border:1px solid rgba(255,255,255,.35); border-radius:999px; padding:8px 12px; letter-spacing:.02em;
    }
    .hero-ss__center h1{font-size:54px; line-height:1.05; font-weight:900; margin-top:10px; text-shadow:0 2px 20px rgba(0,0,0,.12)}
    .hero-ss__center p{color:#fff; opacity:.92; font-weight:600; margin-top:10px; font-size:18px}
    .hero-ss__search{margin:26px auto 0; display:flex; align-items:center; gap:10px; background:#fff; border-radius:14px; padding:8px; max-width:720px; box-shadow:0 14px 32px rgba(193,53,132,.25)}
    .hero-ss__search input{flex:1; border:0; outline:0; padding:14px; border-radius:10px; font-size:15px; color:#111827}
    .hero-ss__actions{display:flex; gap:8px}
    .hero-ss__actions button{display:inline-flex; align-items:center; gap:8px; border:0; cursor:pointer; padding:10px 14px; border-radius:10px; font-weight:700; transition:.15s transform ease}
    .hero-ss__actions .ghost{background:#fff2f2; color:#C13584}
    .hero-ss__actions .primary{background:#C13584; color:#fff}
    .hero-ss__actions button:hover{transform:translateY(-1px)}

    @media (max-width:900px){ .hero-ss__center h1{font-size:42px} .hero-ss__pillnav{display:none} }
    @media (max-width:560px){
      .hero-ss{padding-bottom:56px}
      .hero-ss__center h1{font-size:34px}
      .hero-ss__search{flex-direction:column; align-items:stretch}
    }

    /* ===== SECTION WRAPPER ===== */
    .section{padding:46px 16px}
    .wrap{max-width:var(--max); margin:0 auto}

    /* ===== HOW TO + FEATURES ===== */
    .title{text-align:center; font-size:36px; font-weight:800; color:var(--ink); margin:8px 0 18px}
    .title span{
      background:linear-gradient(135deg,var(--magenta),var(--purple));
      -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:#C13584; background:rgba(193,53,132,.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:#C13584; color:#fff; border:0; border-radius:999px; padding:12px 18px; font-weight:700; cursor:pointer; box-shadow:0 8px 18px rgba(193,53,132,.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 #f5d7ea; border-radius:16px; padding:18px; box-shadow:var(--shadow)}
    .ico{width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:rgba(193,53,132,.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 US ===== */
    .why-choose{background:#f1e7f6; 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(--magenta),var(--purple)); -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(193,53,132,.18); border:1px solid rgba(193,53,132,.18)}
    .wc-icon svg{width:34px; height:34px}
    .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 ===== */
    .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-title span{background:linear-gradient(135deg,var(--magenta),var(--purple)); -webkit-background-clip:text; background-clip:text; color:transparent}
    .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:#F8F4FA; 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:#fbf8fd}
    .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, #FFDC80 0%, #FCAF45 30%, #F56040 55%, #C13584 80%, #833AB4 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:380px}
    .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:#C13584; color:#fff; box-shadow:0 6px 18px rgba(193,53,132,.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}
    @media (max-width:980px){ .ft-wrap{grid-template-columns:1fr 1fr} }
    @media (max-width:600px){ .ft-wrap{grid-template-columns:1fr} .ft-about p{max-width:none} .ft-form{grid-template-columns:1fr} }

    /* Dim Dark Theme */
    [data-theme="dark"] body{ background:#101227; color:#eef0ff; }
    [data-theme="dark"] .hero-ss{ background:radial-gradient(1200px 900px at 0% 0%, #33214a 0%, #2a1c42 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,.18); }
    [data-theme="dark"] .hero-ss__center p{ color:#f7f7ff; opacity:.92; }
    [data-theme="dark"] .hero-ss__search{ background:#151a34; box-shadow:0 14px 28px rgba(0,0,0,.45); }
    [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:#2a1f47; color:#fcfcfd; }
    [data-theme="dark"] .lang-opt .check{ color:#cfd2ff; }

    /* 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 }
    }
  </style>
</head>
<body>

  <!-- ===== HERO ===== -->
  <section class="hero-ss">
    <div class="hero-ss__top">
      <!-- Logo -->
      <div class="hero-ss__logo" aria-label="Logo">
        <div class="hero-ss__logo-badge">
          <!-- Instagram-like glyph -->
          <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
            <rect x="3.5" y="3.5" width="17" height="17" rx="5" fill="none" stroke="#fff" stroke-width="2"/>
            <circle cx="12" cy="12" r="4.2" fill="none" stroke="#fff" stroke-width="2"/>
            <circle cx="17.4" cy="6.8" r="1.3" fill="#fff"/>
          </svg>
        </div>
        <span>InstaSave</span>
      </div>

       <!-- Pill Nav -->
      <nav class="hero-ss__pillnav" id="pillnav" aria-label="Primary">
        <div class="pill-track">
          <a class="pill" href="{{ url_for('index') }}">Instagram Downloader</a>
          <a class="pill" href="{{ url_for('tiktok_downloader') }}">insta Reels Downloader</a>
          <a class="pill" href="{{ url_for('download_tiktok_mp3') }}">Download insta Stories</a>
          <span class="pill-thumb" aria-hidden="true"></span>
        </div>
      </nav>

      <!-- Language + Theme controls -->
      <div class="lang-wrap" aria-label="Display and language controls">
        <button class="hero-ss__theme" id="themeBtn" title="Toggle theme" aria-label="Toggle theme">☀️</button>

        <button class="hero-ss__lang" id="langBtn" aria-haspopup="listbox" aria-expanded="false">
          <span id="langLabel">Language</span>
          <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true">
            <path d="M6 9l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          </svg>
        </button>

        <!-- Language popup -->
        <div class="lang-pop" id="langPop" hidden>
          <ul class="lang-list" id="langList" role="listbox" aria-label="Select language">
            <li><button class="lang-opt" role="option" data-code="en" aria-selected="true">English <span class="check">✓</span></button></li>
            <li><button class="lang-opt" role="option" data-code="ur">اردو (Urdu) <span class="check">✓</span></button></li>
            <li><button class="lang-opt" role="option" data-code="hi">हिन्दी (Hindi) <span class="check">✓</span></button></li>
            <li><button class="lang-opt" role="option" data-code="ar">العربية (Arabic) <span class="check">✓</span></button></li>
            <li><button class="lang-opt" role="option" data-code="es">Español (Spanish) <span class="check">✓</span></button></li>
            <li><button class="lang-opt" role="option" data-code="fr">Français (French) <span class="check">✓</span></button></li>
            <li><button class="lang-opt" role="option" data-code="pt">Português (Portuguese) <span class="check">✓</span></button></li>
            <li><button class="lang-opt" role="option" data-code="tr">Türkçe (Turkish) <span class="check">✓</span></button></li>
            <li><button class="lang-opt" role="option" data-code="th">ภาษาไทย (Thai) <span class="check">✓</span></button></li>
            <li><button class="lang-opt" role="option" data-code="ja">日本語 (Japanese) <span class="check">✓</span></button></li>
            <li><button class="lang-opt" role="option" data-code="ko">한국어 (Korean) <span class="check">✓</span></button></li>
            <li><button class="lang-opt" role="option" data-code="ru">Русский (Russian) <span class="check">✓</span></button></li>
          </ul>
        </div>
      </div>
    </div>

    <!-- Center: Headline + Search -->
    <div class="hero-ss__center">
      <span class="hero-ss__eyebrow">
        <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
          <path d="M3 5h18M3 12h12M3 19h8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
        </svg>
         <b>Stories</b>
      </span>
      <h1>Instagram story Downloader</h1>
      <p>Download Instagram " Stories " <b>Stories</b> by entering an <b>@username</b>.</p>

      <!-- Wired to Flask (kept same IDs & route) -->
      <form class="hero-ss__search" id="heroSearch" action="{{ url_for('index') }}" method="POST" novalidate>
        <!-- CHANGED: text input so @username works too -->
        <input
          id="ssUrl"
          name="url"
          type="text"
          placeholder=" Type @username for Stories (e.g. @nasa)"
          autocomplete="off"
          inputmode="url"
          aria-label="Paste  or type @username"
          required
        />
        <div class="hero-ss__actions">
          <button type="button" id="ssPaste" class="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>
            Paste
          </button>

          <button type="submit" id="ssSubmit" class="primary">
            <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path d="M21 21l-4.3-4.3M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
            Download
          </button>
        </div>
      </form>

      <!-- tiny hint (non-blocking) -->
      <small style="display:block;margin-top:8px;opacity:.9">Tip: Enter <b>@username</b> to fetch their current public Stories.</small>
    </div>
  </section>

  <!-- ===== HOW TO + FEATURES ===== -->
  <section class="section">
    <div class="wrap">
      <h2 class="title"><span>How to Download</span></h2>

      <div class="steps">
        <article class="step">
          <div class="step-head"><span class="num">01</span><span class="corner-ico"></span></div>
          <h3>Copy Instagram Link</h3>
          <p>On Instagram, tap the ••• menu on a Reel or Video post and choose <b>Copy link</b>.</p>
        </article>
        <article class="step">
          <div class="step-head"><span class="num">02</span><span class="corner-ico"></span></div>
          <h3>Paste or Type @username</h3>
          <p>Paste the link above <i>or</i> enter an <b>@username</b> to fetch their public Stories.</p>
        </article>
        <article class="step">
          <div class="step-head"><span class="num">03</span><span class="corner-ico"></span></div>
          <h3>Click “Download”</h3>
          <p>We’ll fetch the best available MP4 (and merge audio if needed) or gather Stories.</p>
        </article>
        <article class="step">
          <div class="step-head"><span class="num">04</span><span class="corner-ico"></span></div>
          <h3>Save in HD</h3>
          <p>Preview the video(s), then save in a single click.</p>
        </article>
      </div>

      <div class="cta"><button class="btn" type="button" onclick="document.getElementById('ssUrl').focus()">Get Started</button></div>

      <h2 class="title" style="margin-top:40px"><span>Why You’ll Love InstaSave</span></h2>

      <div class="features">
        <article class="feature">
          <div class="ico">
            <svg viewBox="0 0 24 24" aria-hidden="true">
              <circle cx="12" cy="12" r="10" fill="url(#g)"/>
              <path d="M7 12.5l3 3 7-7" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
          <div><h4>Reels & Posts</h4>
            <p>Works with most public Reels and video posts — just drop the link.</p></div>
        </article>

        <article class="feature">
          <div class="ico">
            <svg viewBox="0 0 24 24" aria-hidden="true">
              <circle cx="12" cy="12" r="10" fill="url(#g)"/>
              <path d="M8 12h8M8 8h8M8 16h5" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/>
            </svg>
          </div>
          <div><h4>Free & Fast</h4>
            <p>Unlimited downloads with quick processing for compatible links.</p></div>
        </article>

        <article class="feature">
          <div class="ico">
            <svg viewBox="0 0 24 24" aria-hidden="true">
              <circle cx="12" cy="12" r="10" fill="url(#g)"/>
              <path d="M6 16h12M12 4v8" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/>
            </svg>
          </div>
          <div><h4>MP4 Output</h4>
            <p>We deliver a standard MP4 that’s easy to play and edit anywhere.</p></div>
        </article>

        <article class="feature">
          <div class="ico">
            <svg viewBox="0 0 24 24" aria-hidden="true">
              <circle cx="12" cy="12" r="10" fill="url(#g)"/>
              <path d="M4 16h16M7 8h10l-2 4H9L7 8z" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
          <div><h4>HD Quality</h4>
            <p>Auto-selects the highest available quality, merging audio/video if required.</p></div>
        </article>
      </div>

      <svg width="0" height="0" style="position:absolute">
        <defs>
          <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stop-color="#FFDC80"/><stop offset="50%" stop-color="#F56040"/><stop offset="100%" stop-color="#C13584"/>
          </linearGradient>
        </defs>
      </svg>
    </div>
  </section>

  <!-- ===== WHY CHOOSE US ===== -->
  <section class="why-choose">
    <div class="wc-wrap">
      <h2 class="wc-title"> <span>Made for Instagram</span></h2>
      <div class="wc-grid">
        <article class="wc-item">
          <div class="wc-icon">
            <svg viewBox="0 0 24 24" aria-hidden="true">
              <defs><linearGradient id="wc-grad" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#FFDC80"/><stop offset="100%" stop-color="#C13584"/></linearGradient></defs>
              <path d="M6 18h12M6 18a2 2 0 1 1 0-4h2m8 4a2 2 0 1 0 0-4h-2M12 3v9m0 0l-3-3m3 3l3-3" fill="none" stroke="url(#wc-grad)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
          <h3>Lightning Fast</h3>
          <p>We optimize formats and merging to keep downloads snappy.</p>
        </article>

        <article class="wc-item">
          <div class="wc-icon">
            <svg viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12 14a4 4 0 1 0-4-4m8 0a4 4 0 0 0-8 0m-2 8a8 8 0 1 1 16 0" fill="none" stroke="url(#wc-grad)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M7 10h10" stroke="url(#wc-grad)" stroke-width="2" stroke-linecap="round"/>
            </svg>
          </div>
          <h3>No Account Needed</h3>
          <p>Paste a public link and you’re good. Private content requires access in your account.</p>
        </article>

        <article class="wc-item">
          <div class="wc-icon">
            <svg viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12 22s7-6.2 7-11a7 7 0 1 0-14 0c0 4.8 7 11 7 11z" fill="none" stroke="url(#wc-grad)" stroke-width="2"/>
              <path d="M12 8.2l.9 1.8 2 .3-1.5 1.5.3 2-1.7-.9-1.7.9.3-2L9.1 10l2-.3L12 8.2z" fill="none" stroke="url(#wc-grad)" stroke-width="2" stroke-linejoin="round"/>
            </svg>
          </div>
          <h3>Clean & Secure</h3>
          <p>Your files stream directly from our server. No extra plugins.</p>
        </article>

        <article class="wc-item">
          <div class="wc-icon">
            <svg viewBox="0 0 24 24" aria-hidden="true">
              <path d="M9 3a2 2 0 0 1 2 2v1h2a2 2 0 1 1 0 4h-2v2h2a2 2 0 1 1 0 4h-2v1a2 2 0 1 1-4 0v-1H5a2 2 0 0 1-2-2v-2h1a2 2 0 1 0 0-4H3V5a2 2 0 0 1 2-2h4z" fill="none" stroke="url(#wc-grad)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
          <h3>Unlimited Downloads</h3>
          <p>Grab as many videos as you like — totally free.</p>
        </article>
      </div>
    </div>
  </section>

  <!-- gradient defs for FAQ icons -->
  <svg width="0" height="0" style="position:absolute">
    <defs>
      <linearGradient id="grad-stroke" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%" stop-color="#FFDC80"/><stop offset="100%" stop-color="#C13584"/>
      </linearGradient>
    </defs>
  </svg>

  <!-- ===== FAQ ===== -->
  <section class="faq-sec">
    <div class="faq-wrap">
      <h2 class="faq-title"><span>Frequently Asked Questions </span></h2>
      <p class="faq-sub">Quick answers about supported links, privacy, and quality.</p>

      <div class="faq-list" role="list">
        <div class="faq-item" role="listitem">
          <button class="faq-btn" aria-expanded="true">
            <span>Which Instagram links are supported?</span>
            <svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>
          </button>
          <div class="faq-panel" role="region">
            Most public Reel and video post URLs (including short links) are supported. You can also enter an
            <b>@username</b> (or just <b>username</b>) to fetch that account’s <b>current public Stories</b>. Private or age-restricted content
            requires access via your own account; otherwise it can’t be fetched.
          </div>
        </div>

        <div class="faq-item" role="listitem">
          <button class="faq-btn" aria-expanded="false">
            <span>Do I need to log in?</span>
            <svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>
          </button>
          <div class="faq-panel" role="region">
            No for public links. If a video or Stories are private or region/age-restricted, you’ll need to be able to access them in your account.
          </div>
        </div>

        <div class="faq-item" role="listitem">
          <button class="faq-btn" aria-expanded="false">
            <span>What format do I get?</span>
            <svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>
          </button>
          <div class="faq-panel" role="region">
            MP4. If Instagram serves separate audio/video streams, we’ll merge them automatically for a seamless file.
          </div>
        </div>

        <div class="faq-item" role="listitem">
          <button class="faq-btn" aria-expanded="false">
            <span>Is there a limit?</span>
            <svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>
          </button>
          <div class="faq-panel" role="region">
            No hard limit for public links. Very large or throttled videos may take longer depending on your connection.
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ===== FOOTER ===== -->
  <footer class="ft">
    <div class="ft-wrap">
      <div class="ft-about">
        <div class="ft-logo" aria-label="Brand">
          <svg viewBox="0 0 48 48" width="40" height="40" aria-hidden="true">
            <defs>
              <linearGradient id="lg1" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0%" stop-color="#FFDC80"/><stop offset="45%" stop-color="#F56040"/><stop offset="100%" stop-color="#833AB4"/>
              </linearGradient>
            </defs>
            <rect x="6" y="6" width="36" height="36" rx="10" fill="url(#lg1)" opacity=".95"/>
            <circle cx="24" cy="24" r="9" fill="#fff" opacity=".2"/>
          </svg>
        </div>
        <p>InstaSave helps you download Instagram Reels & videos in clean MP4 format — no sign-in, no fuss.</p>
      </div>

      <nav class="ft-links" aria-label="Footer navigation">
        <h6>PAGES</h6>
        <ul>
          <li><a href="#">Contact Us</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Terms &amp; Conditions</a></li>
          <li><a href="#">Privacy Policy</a></li>
          <li><a href="#">Disclaimer</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> InstaSave — All Rights Reserved</div>
  </footer>

  <script>
    // ===== Theme Toggle =====
    (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);
      });
    })();

    // ===== Pill Nav Thumb + Active State =====
    (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();

      // Reposition on resize/orientation change
      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(()=>{}); }

      // Keyboard arrow nav (left/right) + hover animation
      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 =====
    (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); }
      }

      // Restore saved language
      const savedLang = localStorage.getItem('site_lang');
      if(savedLang){
        const opt = list.querySelector(`.lang-opt[data-code="${savedLang}"]`);
        if(opt){
          list.querySelectorAll('.lang-opt').forEach(o=>o.setAttribute('aria-selected','false'));
          opt.setAttribute('aria-selected','true');
          label.textContent = opt.textContent.replace('✓','').trim();
        }
      }

      // Toggle popup
      btn.addEventListener('click', ()=> openPop(!wrap.classList.contains('open')));

      // Select language
      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);
      });

      // Keyboard nav
      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());
        }
      });

      // Close on outside click / ESC
      document.addEventListener('click', (e)=>{ if(!wrap.contains(e.target)) openPop(false); });
      document.addEventListener('keydown', (e)=>{ if(e.key==='Escape') openPop(false); });
    })();

    // ===== Paste + Submit to Flask (kept same IDs) =====
    (function(){
      const pasteBtn=document.getElementById('ssPaste');
      const input=document.getElementById('ssUrl');
      const form=document.getElementById('heroSearch');
      const submitBtn=document.getElementById('ssSubmit');

      // helper: accept URL or @handle
      function isUrlOrHandle(v){
        const val=(v||'').trim();
        if(!val) return false;
        if(/^https?:\/\//i.test(val)) return true; // any http(s) URL — backend validates service
        return /^@?[a-z0-9._]{1,30}$/i.test(val);  // Instagram username
      }

      pasteBtn?.addEventListener('click', async ()=>{
        try{
          const txt=await navigator.clipboard.readText();
          if(txt) input.value=txt.trim();
        }catch{
          alert('Clipboard not available. Paste with Ctrl/⌘+V.');
        }
      });

      form?.addEventListener('submit',(e)=>{
        const val=(input.value||'').trim();
        if(!isUrlOrHandle(val)){
          e.preventDefault();
          input.focus();
          alert('Enter a valid Instagram URL or @username for Stories.');
          return;
        }
        submitBtn.disabled=true;
        submitBtn.innerHTML = '<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path d="M12 2a10 10 0 1 0 10 10" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg> Fetching…';
      });
    })();

    // ===== Why Choose Us: Reveal on scroll =====
    (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(); }
    })();

    // ===== FAQ accordion =====
    (function(){
      const items = document.querySelectorAll('.faq-item');
      items.forEach((it, i)=>{
        const btn = it.querySelector('.faq-btn');
        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!==btn) b.setAttribute('aria-expanded','false'); });
          btn.setAttribute('aria-expanded', String(!open));
        });
      });
    })();

    // ===== Footer year + demo subscribe =====
    document.getElementById('ftYear').textContent = new Date().getFullYear();
    (function(){
      const form = document.getElementById('ftForm');
      const emailEl = document.getElementById('ftEmail');
      const msg = document.getElementById('ftMsg');
      form.addEventListener('submit', 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'); msg.textContent='Thanks! You are subscribed.'; form.reset();
      });
    })();
  </script>
</body>
</html>
