:root{
    --blue-600:#2563eb;
    --blue-500:#3b82f6;
    --blue-100:#dbeafe;
    --blue-50:#eff6ff;
    --ink-900:#0f172a;
    --ink-700:#334155;
    --ink-500:#64748b;
    --ink-400:#94a3b8;
    --slate-100:#f1f5f9;
    --slate-200:#e2e8f0;
    --green-50:#ecfdf5;
    --green-200:#bbf7d0;
    --green-700:#15803d;
    --white:#ffffff;
    --radius-lg:16px;
    --radius-md:12px;
    --radius-sm:8px;
    --shadow-card: 0 1px 2px rgba(15,23,42,0.04), 0 1px 3px rgba(15,23,42,0.06);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
    color: var(--ink-900);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
  }
  a{ text-decoration:none; color:inherit; }
  img,svg{ display:block; }
  .wrap{
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 40px;
  }

  /* ---------- Header ---------- */
  header{
    border-bottom: 1px solid var(--slate-200);
  }
  .nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height: 76px;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:12px;
  }
  .brand-mark{
    height: 42px;
    width: auto;
  }
  .brand-wordmark{
    height: 22px;
    width: auto;
  }

  .nav-links{
    display:flex;
    align-items:center;
    gap: 34px;
    font-size: 15px;
    font-weight: 500;
    color: var(--ink-700);
  }
  .nav-links a{ position:relative; padding-bottom: 24px; }
  .nav-links a.active{ color: var(--blue-600); font-weight:600; }
  .nav-links a.active::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height:2px;
    background: var(--blue-600);
    border-radius: 2px;
  }
  .nav-links a:hover:not(.active){ color: var(--ink-900); }
  .caret{ font-size: 10px; margin-left: 4px; color: var(--ink-500); }

  .nav-right{
    display:flex;
    align-items:center;
    gap: 22px;
    color: var(--ink-700);
  }
  .icon-btn{
    width: 22px; height:22px;
    display:flex; align-items:center; justify-content:center;
    color: var(--ink-700);
    cursor:pointer;
  }
  .lang{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:14px;
    font-weight:600;
    color: var(--ink-700);
    cursor:pointer;
  }

  /* ---------- Hero ---------- */
  .hero{
    padding: 56px 0 64px;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items:center;
  }
  .badge-row{
    display:inline-flex;
    align-items:center;
    gap: 10px;
    background: var(--blue-50);
    color: var(--blue-600);
    font-size: 13px;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: 999px;
    margin-bottom: 22px;
  }
  .badge-row .dot{ color: var(--blue-300, #93c5fd); }

  h1.headline{
    font-size: 56px;
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ink-900);
    margin-bottom: 22px;
  }
  h1.headline .blue{ color: var(--blue-600); }

  .lede{
    font-size: 18px;
    line-height: 1.55;
    color: var(--ink-500);
    max-width: 480px;
    margin-bottom: 30px;
  }

  .pill-grid{
    display:grid;
    grid-template-columns: repeat(2, auto);
    gap: 12px;
  }
  .pill{
    display:flex;
    align-items:center;
    gap: 10px;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-md);
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-700);
    background: var(--white);
  }
  .pill svg{ width:17px; height:17px; color: var(--blue-600); flex-shrink:0; }

  /* Upload card */
  .upload-card{
    border: 1.5px dashed var(--blue-300, #93c5fd);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, #fbfdff 0%, #f7faff 100%);
    padding: 56px 40px;
    text-align:center;
  }
  .stack-icons{
    position:relative;
    height: 130px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom: 22px;
  }
  .chip{
    position:absolute;
    width: 70px;
    height: 92px;
    background: var(--white);
    border: 1px solid var(--slate-200);
    border-radius: 10px;
    box-shadow: var(--shadow-card);
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding-top: 14px;
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-500);
  }
  .chip.c1{ transform: rotate(-14deg) translate(-155px, 6px); }
  .chip.c2{ transform: rotate(-6deg) translate(-90px, -8px); }
  .chip.c3{ transform: rotate(8deg) translate(90px, -8px); }
  .chip.c4{ transform: rotate(15deg) translate(150px, 8px); }
  .upload-icon{
    width: 84px; height: 84px;
    background: var(--blue-600);
    border-radius: 22px;
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 12px 24px -8px rgba(37,99,235,0.45);
    z-index: 2;
    transform: rotate(-4deg);
  }
  .upload-icon svg{ width: 38px; height:38px; color:white; }
  .note-badge{
    position:absolute;
    right: calc(50% - 78px);
    top: -6px;
    width: 40px; height:40px;
    background: var(--white);
    border: 1px solid var(--slate-200);
    border-radius: 50%;
    display:flex; align-items:center; justify-content:center;
    box-shadow: var(--shadow-card);
    z-index: 3;
  }
  .note-badge svg{ width:18px; height:18px; color: var(--blue-600); }

  .upload-card h3{
    font-size: 21px;
    font-weight: 700;
    color: var(--ink-900);
    margin-bottom: 6px;
  }
  .upload-card .or{
    font-size: 14px;
    color: var(--ink-400);
    margin-bottom: 18px;
  }
  .btn-primary{
    display:inline-flex;
    align-items:center;
    gap: 10px;
    background: var(--blue-600);
    color: white;
    font-size: 15px;
    font-weight: 700;
    padding: 14px 28px;
    border-radius: var(--radius-md);
    border:none;
    cursor:pointer;
    box-shadow: 0 8px 18px -6px rgba(37,99,235,0.45);
  }
  .btn-primary svg{ width:17px; height:17px; }
  .upload-card .support{
    font-size: 13px;
    color: var(--ink-400);
    margin-top: 22px;
    line-height:1.6;
  }

  /* ---------- Feature strip ---------- */
  .feature-strip{
    border-top: 1px solid var(--slate-200);
    border-bottom: 1px solid var(--slate-200);
    padding: 44px 0;
  }
  .feature-grid{
    display:grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 28px;
  }
  .feature{
    display:flex;
    gap: 14px;
  }
  .feature .ficon{
    width: 42px; height:42px;
    border-radius: 10px;
    background: var(--blue-50);
    color: var(--blue-600);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .feature .ficon svg{ width:20px; height:20px; }
  .feature h4{
    font-size: 15px;
    font-weight: 700;
    color: var(--ink-900);
    margin-bottom: 4px;
  }
  .feature p{
    font-size: 13.5px;
    color: var(--ink-500);
    line-height: 1.5;
  }

  /* ---------- Two column: formats / how it works ---------- */
  .cols{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 48px 0;
  }
  .card{
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    padding: 32px;
  }
  .card h2{
    font-size: 21px;
    font-weight: 800;
    color: var(--ink-900);
    margin-bottom: 24px;
  }

  .fmt-label{
    display:flex;
    align-items:center;
    gap:8px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink-900);
    margin-bottom: 14px;
  }
  .fmt-label svg{ width:16px; height:16px; }
  .fmt-label.in svg{ color: var(--blue-600); }
  .fmt-label.out svg{ color: var(--green-700); }

  .fmt-row{
    display:flex;
    flex-wrap:wrap;
    gap: 10px;
    margin-bottom: 12px;
  }
  .tag{
    padding: 9px 16px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    font-weight: 600;
  }
  .tag.in{ background: var(--slate-100); color: var(--ink-700); }
  .tag.out{ background: var(--green-50); color: var(--green-700); }

  .formats-body{
    display:grid;
    grid-template-columns: 1fr 44px 1fr;
    align-items:start;
    gap: 6px;
  }
  .swap{
    width:44px; height:44px;
    border-radius:50%;
    background: var(--slate-100);
    display:flex; align-items:center; justify-content:center;
    margin: 30px auto 0;
  }
  .swap svg{ width:18px; height:18px; color: var(--blue-600); }

  .callout{
    display:flex;
    align-items:center;
    gap: 12px;
    background: var(--blue-50);
    color: var(--blue-600);
    font-size: 13.5px;
    font-weight: 600;
    border-radius: var(--radius-md);
    padding: 14px 18px;
    margin-top: 22px;
  }
  .callout svg{ width:20px; height:20px; flex-shrink:0; }

  /* How it works */
  .steps{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    position:relative;
  }
  .step{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    position:relative;
    padding: 0 4px;
  }
  .step-circle-wrap{
    position:relative;
    margin-bottom: 16px;
  }
  .step-circle{
    width: 60px; height:60px;
    border-radius: 50%;
    border: 1px solid var(--slate-200);
    display:flex; align-items:center; justify-content:center;
    background:white;
  }
  .step-circle svg{ width:22px; height:22px; color: var(--ink-700); }
  .step-num{
    position:absolute;
    top:-6px; right:-6px;
    width: 24px; height:24px;
    background: var(--blue-600);
    color:white;
    border-radius:50%;
    font-size: 12px;
    font-weight:700;
    display:flex; align-items:center; justify-content:center;
    border: 2px solid white;
  }
  .step h4{
    font-size: 15px;
    font-weight: 700;
    color: var(--ink-900);
    margin-bottom: 6px;
  }
  .step p{
    font-size: 13px;
    color: var(--ink-500);
    line-height: 1.5;
    max-width: 120px;
  }
  .step-connector{
    position:absolute;
    top: 30px;
    left: calc(50% + 40px);
    width: calc(100% - 80px);
    border-top: 2px dashed var(--slate-200);
    z-index:0;
  }

  /* ---------- Privacy banner ---------- */
  .privacy{
    background: var(--blue-50);
    border-radius: var(--radius-lg);
    margin: 8px 0 56px;
    padding: 28px 36px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 24px;
  }
  .privacy-left{
    display:flex;
    align-items:center;
    gap: 16px;
  }
  .privacy-icon{
    width: 46px; height:46px;
    background: var(--white);
    border-radius: var(--radius-md);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .privacy-icon svg{ width:22px; height:22px; color: var(--blue-600); }
  .privacy h3{
    font-size: 16.5px;
    font-weight: 700;
    color: var(--ink-900);
    margin-bottom: 3px;
  }
  .privacy p{
    font-size: 13.5px;
    color: var(--ink-500);
  }
  .btn-cta{
    display:inline-flex;
    align-items:center;
    gap: 8px;
    background: var(--blue-600);
    color:white;
    font-weight: 700;
    font-size: 14.5px;
    padding: 13px 24px;
    border-radius: var(--radius-md);
    white-space:nowrap;
    box-shadow: 0 8px 18px -6px rgba(37,99,235,0.45);
  }
  .btn-cta svg{ width:16px; height:16px; }

  /* ---------- Upload interactivity ---------- */
  .upload-card.drag-over{
    border-color: var(--blue-600);
    background: var(--blue-100);
  }
  .upload-card .btn-primary:disabled{ opacity:.6; cursor:not-allowed; }

  .queue-panel{ text-align:left; }
  .queue-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:18px;
  }
  .queue-head h3{
    font-size: 16px;
    font-weight:700;
    color: var(--ink-900);
  }
  .queue-actions{ display:flex; gap:10px; }
  .btn-ghost{
    background:none;
    border: 1px solid var(--slate-200);
    color: var(--ink-700);
    font-size: 13px;
    font-weight:600;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    cursor:pointer;
  }
  .btn-ghost:hover{ background: var(--slate-100); }

  .format-row{
    display:flex;
    align-items:center;
    gap: 10px;
    margin-bottom: 18px;
    flex-wrap:wrap;
  }
  .format-row label{
    font-size: 13.5px;
    font-weight:600;
    color: var(--ink-700);
  }
  select.fmt-select{
    font-family: inherit;
    font-size: 14px;
    font-weight:600;
    color: var(--ink-900);
    background: var(--white);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-sm);
    padding: 9px 14px;
    cursor:pointer;
  }

  .file-list{
    display:flex;
    flex-direction:column;
    gap: 12px;
    margin-bottom: 20px;
    max-height: 280px;
    overflow-y:auto;
  }
  .file-row{
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    background: var(--white);
  }
  .file-row-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
    margin-bottom: 8px;
  }
  .file-row-name{
    font-size: 13.5px;
    font-weight:700;
    color: var(--ink-900);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    max-width: 260px;
  }
  .file-row-meta{
    font-size: 12px;
    color: var(--ink-400);
    font-weight:500;
    flex-shrink:0;
  }
  .file-row-status{
    font-size: 12px;
    font-weight:600;
  }
  .file-row-status.queued{ color: var(--ink-400); }
  .file-row-status.working{ color: var(--blue-600); }
  .file-row-status.done{ color: var(--green-700); }
  .file-row-status.error{ color: #dc2626; }
  .progress-track{
    width:100%;
    height: 6px;
    background: var(--slate-100);
    border-radius: 999px;
    overflow:hidden;
  }
  .progress-fill{
    height:100%;
    width:0%;
    background: var(--blue-600);
    border-radius:999px;
    transition: width .2s ease;
  }
  .file-row-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top: 8px;
  }
  .remove-x{
    background:none; border:none; cursor:pointer;
    color: var(--ink-400);
    font-size: 13px;
    font-weight:700;
    padding: 2px 6px;
  }
  .remove-x:hover{ color:#dc2626; }
  .btn-download{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background: var(--green-50);
    color: var(--green-700);
    font-size: 12.5px;
    font-weight:700;
    padding: 7px 12px;
    border-radius: var(--radius-sm);
    border:none;
    cursor:pointer;
  }
  .btn-download svg{ width:14px; height:14px; }

  .convert-row{ display:flex; gap:10px; }
  .convert-row .btn-primary{ flex:1; justify-content:center; }

  .load-status{
    font-size: 12.5px;
    color: var(--ink-500);
    margin-top: 14px;
    min-height: 16px;
  }
  .load-status.error{ color:#dc2626; font-weight:600; }

  .app-msg{
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    background: var(--ink-900);
    color: white;
    font-size: 13.5px;
    font-weight:600;
    padding: 12px 20px;
    border-radius: var(--radius-md);
    box-shadow: 0 12px 24px -8px rgba(15,23,42,0.35);
    z-index: 50;
    opacity:0;
    pointer-events:none;
    transition: opacity .25s ease, transform .25s ease;
  }
  .app-msg.show{ opacity:1; transform: translateX(-50%) translateY(-6px); }

  .hidden{ display:none !important; }

  /* ---------- Responsive ---------- */
  @media (max-width: 980px){
    .wrap{ padding: 0 20px; }
    .nav-links{ display:none; }
    .hero{ grid-template-columns: 1fr; padding-top: 32px; }
    h1.headline{ font-size: 38px; }
    .feature-grid{ grid-template-columns: repeat(2,1fr); }
    .cols{ grid-template-columns: 1fr; }
    .formats-body{ grid-template-columns: 1fr; }
    .swap{ margin: 10px auto; transform: rotate(90deg); }
    .steps{ flex-wrap:wrap; row-gap: 28px; }
    .step-connector{ display:none; }
    .privacy{ flex-direction:column; align-items:flex-start; }
  }

  /* ---------- Footer ---------- */
  footer{
    border-top: 1px solid var(--slate-200);
    background: var(--slate-100);
    margin-top: 64px;
  }
  .footer-top{
    padding: 56px 0 40px;
    display:grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 32px;
  }
  .footer-brand{ display:flex; flex-direction:column; gap:14px; }
  .footer-brand .brand{ display:flex; align-items:center; gap:10px; }
  .footer-brand .brand-mark{ height:34px; width:auto; }
  .footer-brand .brand-wordmark{ height:18px; width:auto; }
  .footer-brand p{
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ink-500);
    max-width: 320px;
  }
  .footer-col h5{
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-900);
    margin-bottom: 16px;
  }
  .footer-col ul{ list-style:none; display:flex; flex-direction:column; gap:11px; }
  .footer-col a{
    font-size: 14px;
    color: var(--ink-500);
  }
  .footer-col a:hover{ color: var(--blue-600); }
  .footer-bottom{
    border-top: 1px solid var(--slate-200);
    padding: 22px 0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
    font-size: 13px;
    color: var(--ink-500);
  }
  .footer-bottom a{ color: var(--blue-600); font-weight:600; }
  .footer-bottom a:hover{ text-decoration:underline; }

  @media (max-width: 900px){
    .footer-top{ grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 600px){
    .footer-top{ grid-template-columns: 1fr; padding: 40px 0 28px; }
    .footer-bottom{ flex-direction:column; align-items:flex-start; }
  }

  /* ---------- Simple page header (FAQ / Privacy) ---------- */
  .page-hero{
    padding: 48px 0 8px;
    text-align:center;
  }
  .page-hero h1{
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ink-900);
    margin-bottom: 12px;
  }
  .page-hero p{
    font-size: 16px;
    color: var(--ink-500);
    max-width: 560px;
    margin: 0 auto;
  }

  /* ---------- FAQ accordion ---------- */
  .faq-list{
    max-width: 820px;
    margin: 40px auto 72px;
    display:flex;
    flex-direction:column;
    gap: 12px;
  }
  .faq-item{
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-md);
    background: var(--white);
    box-shadow: var(--shadow-card);
    overflow:hidden;
  }
  .faq-item summary{
    list-style:none;
    cursor:pointer;
    padding: 18px 22px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 16px;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--ink-900);
  }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary .chev{
    flex-shrink:0;
    width: 20px; height:20px;
    color: var(--blue-600);
    transition: transform 0.2s ease;
  }
  .faq-item[open] summary .chev{ transform: rotate(180deg); }
  .faq-item .faq-answer{
    padding: 0 22px 20px;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--ink-500);
  }

  /* ---------- Legal / Privacy prose ---------- */
  .legal{
    max-width: 780px;
    margin: 32px auto 80px;
  }
  .legal .updated{
    font-size: 13px;
    color: var(--ink-400);
    margin-bottom: 36px;
  }
  .legal h2{
    font-size: 21px;
    font-weight: 700;
    color: var(--ink-900);
    margin: 36px 0 12px;
  }
  .legal h2:first-of-type{ margin-top: 0; }
  .legal p{
    font-size: 15px;
    line-height: 1.7;
    color: var(--ink-700);
    margin-bottom: 14px;
  }
  .legal ul{
    margin: 0 0 14px 20px;
    color: var(--ink-700);
    font-size: 15px;
    line-height: 1.7;
  }
  .legal li{ margin-bottom: 6px; }
  .legal .highlight-box{
    background: var(--blue-50);
    border: 1px solid var(--blue-100);
    border-radius: var(--radius-md);
    padding: 18px 20px;
    margin: 20px 0 28px;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--ink-700);
  }
  .legal .highlight-box strong{ color: var(--ink-900); }