:root {
  --bg: #fffafd;
  --surface: rgba(255,255,255,.86);
  --text: #17121b;
  --muted: #6f6674;
  --line: #eadfe7;
  --pink: #d62976;
  --magenta: #c13584;
  --purple: #833ab4;
  --orange: #f77737;
  --yellow: #fdc500;
  --danger: #b42318;
  --success: #067647;
  --shadow: 0 24px 60px rgba(117, 26, 90, .14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 8% 0%, rgba(253,197,0,.11), transparent 23rem),
    radial-gradient(circle at 94% 11%, rgba(131,58,180,.12), transparent 26rem),
    linear-gradient(180deg, #fff 0%, var(--bg) 52%, #fff 100%);
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }

.ambient { position: fixed; width: 360px; height: 360px; border-radius: 999px; filter: blur(85px); opacity: .17; pointer-events: none; z-index: -1; }
.ambient-one { background: var(--orange); top: 22%; left: -240px; }
.ambient-two { background: var(--purple); top: 42%; right: -240px; }

.site-header {
  width: min(1180px, calc(100% - 40px));
  height: 82px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; letter-spacing: -.3px; }
.brand b { font-weight: 800; }
.brand-icon {
  width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center;
  color: white; background: linear-gradient(135deg, var(--yellow), var(--orange) 35%, var(--pink) 62%, var(--purple));
  box-shadow: 0 8px 22px rgba(193,53,132,.26);
}
.brand-icon svg { width: 21px; fill: currentColor; }
.brand-icon.small { width: 28px; height: 28px; border-radius: 9px; font-size: 10px; }
.nav { display: flex; gap: 28px; color: #5e5661; font-size: 14px; }
.nav a:hover { color: var(--magenta); }

.hero { width: min(900px, calc(100% - 32px)); margin: 72px auto 0; text-align: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .08em; color: #7c566d; text-transform: uppercase; }
.eyebrow span { width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, var(--orange), var(--pink)); box-shadow: 0 0 0 6px rgba(214,41,118,.08); }
h1 { margin: 18px 0 18px; font-size: clamp(43px, 7vw, 74px); line-height: .98; letter-spacing: -.055em; font-weight: 850; }
h1 span { background: linear-gradient(90deg, var(--orange), var(--pink), var(--purple)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-copy { max-width: 670px; margin: 0 auto; color: var(--muted); font-size: 17px; line-height: 1.7; }

.tool-card {
  position: relative;
  width: min(760px, 100%);
  margin: 36px auto 0;
  padding: 7px;
  border-radius: 25px;
  background: linear-gradient(120deg, rgba(253,197,0,.85), rgba(247,119,55,.75), rgba(214,41,118,.8), rgba(131,58,180,.8));
  box-shadow: var(--shadow);
}
.tool-card form { background: rgba(255,255,255,.95); border-radius: 19px; padding: 22px; text-align: left; backdrop-filter: blur(12px); }
.tool-card label { display: block; font-size: 13px; font-weight: 760; margin: 0 0 9px 4px; color: #49404b; }
.input-wrap { display: flex; align-items: center; gap: 10px; height: 60px; border: 1px solid #e6dce3; background: #fff; border-radius: 15px; padding: 0 10px 0 16px; box-shadow: inset 0 1px 1px rgba(29,13,26,.02); transition: .2s ease; }
.input-wrap:focus-within { border-color: rgba(193,53,132,.55); box-shadow: 0 0 0 4px rgba(193,53,132,.08); }
.input-icon { width: 22px; height: 22px; color: #8a7b87; flex: 0 0 auto; }
.input-icon svg { width: 100%; fill: currentColor; }
.input-wrap input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 15px; }
.input-wrap input::placeholder { color: #aaa0a8; }
.paste-btn { border: 0; background: #f7f1f5; color: #6f5364; padding: 9px 12px; border-radius: 10px; font-size: 12px; font-weight: 750; }
.paste-btn:hover { background: #f2e7ee; }
.primary-btn {
  width: 100%; min-height: 58px; border: 0; border-radius: 15px; margin-top: 13px; color: white; font-weight: 800; font-size: 15px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(105deg, var(--orange), var(--pink) 48%, var(--purple));
  box-shadow: 0 12px 24px rgba(193,53,132,.22);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.primary-btn:hover { transform: translateY(-1px); box-shadow: 0 15px 28px rgba(193,53,132,.28); filter: saturate(1.05); }
.primary-btn:disabled { cursor: wait; opacity: .75; transform: none; }
.primary-btn .arrow { width: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spinner { display: none; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.primary-btn.loading .spinner { display: block; }
.primary-btn.loading .arrow { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.form-hint { text-align: center; color: #998d95; font-size: 11px; margin: 13px 0 0; }

.status { max-width: 760px; margin: 14px auto 0; border-radius: 13px; font-size: 13px; line-height: 1.5; }
.status.error, .status.success, .status.info { padding: 12px 15px; border: 1px solid; }
.status.error { color: var(--danger); background: #fff4f2; border-color: #ffd7d2; }
.status.success { color: var(--success); background: #ecfdf3; border-color: #abefc6; }
.status.info { color: #6941c6; background: #f4f3ff; border-color: #d9d6fe; }

.result-card { width: min(760px, 100%); margin: 18px auto 0; background: rgba(255,255,255,.92); border: 1px solid var(--line); border-radius: 22px; padding: 18px; box-shadow: 0 16px 42px rgba(69,33,59,.09); text-align: left; }
.result-main { display: grid; grid-template-columns: 160px 1fr; gap: 18px; align-items: center; }
.preview { aspect-ratio: 4/5; border-radius: 15px; overflow: hidden; background: linear-gradient(145deg, #fdc500, #f77737 35%, #d62976 66%, #833ab4); display: grid; place-items: center; color: #fff; }
.preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.preview svg { width: 46px; fill: currentColor; opacity: .9; }
.result-meta h3 { margin: 0 0 8px; font-size: 20px; line-height: 1.25; }
.result-meta p { margin: 0; color: var(--muted); font-size: 13px; }
.download-list { display: grid; gap: 9px; margin-top: 16px; }
.download-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; border: 1px solid #eadfe7; border-radius: 12px; font-size: 13px; font-weight: 750; }
.download-link:hover { border-color: rgba(193,53,132,.4); background: #fff8fc; }
.download-link span:last-child { color: var(--magenta); }
.demo-box { padding: 14px; border-radius: 13px; background: linear-gradient(135deg, #fff4fa, #f7f2ff); border: 1px dashed #dfbfd3; color: #6d5364; line-height: 1.6; font-size: 13px; }

.trust-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; width: min(670px, 100%); margin: 28px auto 0; }
.trust-row div { display: grid; grid-template-columns: 32px auto; grid-template-rows: auto auto; text-align: left; column-gap: 10px; align-items: center; }
.trust-icon { grid-row: 1/3; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: #fbf3f8; color: var(--pink); font-weight: 800; }
.trust-row b { font-size: 13px; }
.trust-row small { color: var(--muted); font-size: 11px; margin-top: 1px; }

.section { width: min(1080px, calc(100% - 32px)); margin: 142px auto 0; }
.section.compact { width: min(820px, calc(100% - 32px)); margin-top: 120px; }
.section-heading { text-align: center; max-width: 650px; margin: 0 auto 38px; }
.section-heading > span { color: var(--magenta); font-weight: 850; letter-spacing: .1em; font-size: 11px; }
.section-heading h2 { font-size: clamp(32px, 5vw, 48px); letter-spacing: -.045em; margin: 10px 0 10px; }
.section-heading p { color: var(--muted); line-height: 1.7; margin: 0; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.step-card { position: relative; padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.82); box-shadow: 0 12px 30px rgba(62,30,51,.05); }
.step-no { position: absolute; top: 22px; right: 22px; color: #dcced7; font-weight: 900; font-size: 12px; }
.step-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; margin-bottom: 23px; background: linear-gradient(135deg, #fff0d1, #ffe2ef 56%, #eee1ff); color: var(--magenta); font-size: 21px; font-weight: 900; }
.step-card h3 { margin: 0 0 9px; font-size: 18px; }
.step-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }

.faq-list { display: grid; gap: 11px; }
details { background: rgba(255,255,255,.9); border: 1px solid var(--line); border-radius: 15px; padding: 0 18px; }
summary { cursor: pointer; list-style: none; font-weight: 760; padding: 18px 28px 18px 0; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; position: absolute; right: 2px; top: 16px; color: var(--magenta); font-size: 21px; }
details[open] summary::after { content: '−'; }
details p { color: var(--muted); line-height: 1.7; font-size: 14px; margin: -2px 0 18px; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: #f4edf2; border-radius: 5px; padding: 2px 5px; }

footer { width: min(1080px, calc(100% - 32px)); margin: 130px auto 0; border-top: 1px solid var(--line); padding: 32px 0 45px; text-align: center; color: var(--muted); font-size: 12px; }
.footer-brand { color: var(--text); margin-bottom: 10px; }
footer p { max-width: 680px; margin: 7px auto; line-height: 1.6; }
.copyright { color: #a1969e; }

@media (max-width: 720px) {
  .site-header { height: 70px; width: min(100% - 28px, 1180px); }
  .nav { display: none; }
  .brand { font-size: 16px; }
  .hero { margin-top: 48px; }
  h1 { font-size: clamp(42px, 13vw, 58px); }
  .hero-copy { font-size: 15px; }
  .tool-card form { padding: 15px; }
  .input-wrap { height: 56px; }
  .paste-btn { padding: 8px 9px; }
  .primary-btn { min-height: 55px; }
  .trust-row { gap: 8px; }
  .trust-row div { display: flex; flex-direction: column; text-align: center; gap: 4px; }
  .trust-icon { margin-bottom: 4px; }
  .steps-grid { grid-template-columns: 1fr; }
  .section { margin-top: 95px; }
  .result-main { grid-template-columns: 105px 1fr; }
}

@media (max-width: 480px) {
  .hero { width: min(100% - 22px, 900px); }
  .tool-card { border-radius: 21px; padding: 5px; }
  .tool-card form { border-radius: 16px; }
  .input-wrap { padding-left: 12px; }
  .input-icon { display: none; }
  .input-wrap input { font-size: 13px; }
  .trust-row small { display: none; }
  .result-main { grid-template-columns: 1fr; }
  .preview { aspect-ratio: 16/8; }
}

/* v2 ScrapeCreators build enhancements */
.tool-shell{position:relative;max-width:860px;margin:34px auto 0}.tool-shell:before{content:"";position:absolute;inset:-2px;border-radius:30px;background:linear-gradient(110deg,#833ab4,#fd1d1d,#fcb045,#c13584);filter:blur(18px);opacity:.22;z-index:-1}.tool-topline{display:flex;align-items:center;gap:9px;margin-bottom:18px;font-size:13px;font-weight:700;color:#6f6680}.status-dot{width:8px;height:8px;border-radius:50%;background:#35c66b;box-shadow:0 0 0 5px rgba(53,198,107,.12)}.brand-text{white-space:nowrap}.ambient-three{width:390px;height:390px;right:18%;top:650px;background:#fcb045;opacity:.08}.ready-pill{display:inline-flex;align-items:center;padding:7px 11px;border-radius:999px;background:#ecfff2;color:#168844;font-size:12px;font-weight:800;margin-bottom:8px}.media-stats{font-size:13px!important;font-weight:700;color:#766b82!important;margin-top:-3px!important}.result-note{margin:8px 0 18px!important}.download-label{display:flex;flex-direction:column;gap:2px}.download-label small{font-size:11px;font-weight:600;opacity:.7}.download-action{display:flex;align-items:center;gap:8px;font-weight:800}.download-action span{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.19)}.preview-placeholder{width:100%;height:100%;display:grid;place-items:center;background:linear-gradient(145deg,#f6edf9,#fff0ec)}.preview-placeholder svg{width:62px;height:62px;fill:#c13584}.feature-section{padding-top:30px}.feature-grid{max-width:1040px;margin:34px auto 0;display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.feature-grid article{background:rgba(255,255,255,.86);border:1px solid rgba(131,58,180,.12);border-radius:24px;padding:26px;box-shadow:0 14px 40px rgba(76,37,91,.07)}.feature-grid h3{margin:10px 0 7px;font-size:19px}.feature-grid p{margin:0;color:#716a77;line-height:1.7}.feature-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#833ab4,#c13584 50%,#fd1d1d);color:#fff;font-weight:900;font-size:12px}.footer-inner{max-width:1050px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;gap:32px;flex-wrap:wrap}.footer-links{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}.footer-links a{color:#77707c;text-decoration:none;font-weight:700;font-size:13px}.footer-links a:hover{color:#c13584}.legal-page{max-width:900px;margin:40px auto 90px;padding:0 24px}.legal-card{background:#fff;border:1px solid rgba(131,58,180,.12);border-radius:28px;padding:38px;box-shadow:0 18px 60px rgba(59,33,65,.08)}.legal-card h1{font-size:clamp(32px,5vw,52px);margin:0 0 14px;letter-spacing:-1.7px}.legal-card h2{font-size:21px;margin:30px 0 8px}.legal-card p,.legal-card li{color:#68616d;line-height:1.8}.legal-card a{color:#c13584}.back-link{display:inline-flex;margin-bottom:22px;color:#8b3aa5;text-decoration:none;font-weight:800}
@media(max-width:760px){.feature-grid{grid-template-columns:1fr}.tool-topline{justify-content:center}.footer-inner{gap:14px}.legal-card{padding:26px 20px}.nav a:nth-child(3){display:none}}
@media(max-width:520px){.brand-text{font-size:15px}.tool-shell{margin-top:25px}.feature-grid article{padding:22px}.footer-links{gap:12px}}

/* PHP build additions */
.tool-shell{width:100%}.tool-topline{display:flex;align-items:center;gap:7px;max-width:760px;margin:0 auto;padding:0 10px 10px;color:#75596b;font-size:12px;font-weight:800;text-align:left}.status-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 5px rgba(34,197,94,.10)}
.ready-pill{display:inline-flex;align-items:center;gap:6px;margin-bottom:8px;padding:5px 9px;border-radius:999px;background:#ecfdf3;color:#067647;font-size:11px;font-weight:850}.media-stats{margin-bottom:7px!important}.result-note{line-height:1.55!important}.download-label{display:flex;flex-direction:column;gap:2px}.download-label small{color:#8c8189;font-size:11px;font-weight:600}.download-action{display:inline-flex;align-items:center;gap:5px;color:var(--magenta)}
.feature-grid{width:min(900px,100%);margin:34px auto 0;display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.feature-grid article{background:rgba(255,255,255,.86);border:1px solid rgba(131,58,180,.12);border-radius:24px;padding:26px;box-shadow:0 14px 40px rgba(76,37,91,.07)}.feature-grid h3{margin:10px 0 7px;font-size:19px}.feature-grid p{margin:0;color:#716a77;line-height:1.7}.feature-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#833ab4,#c13584 50%,#fd1d1d);color:#fff;font-weight:900;font-size:12px}.footer-inner{max-width:1050px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;gap:32px;flex-wrap:wrap}.footer-links{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}.footer-links a{color:#77707c;text-decoration:none;font-weight:700;font-size:13px}.footer-links a:hover{color:#c13584}.legal-page{max-width:900px;margin:40px auto 90px;padding:0 24px}.legal-card{background:#fff;border:1px solid rgba(131,58,180,.12);border-radius:28px;padding:38px;box-shadow:0 18px 60px rgba(59,33,65,.08)}.legal-card h1{font-size:clamp(32px,5vw,52px);margin:0 0 14px;letter-spacing:-1.7px}.legal-card h2{font-size:21px;margin:30px 0 8px}.legal-card p,.legal-card li{color:#68616d;line-height:1.8}.legal-card a{color:#c13584}.back-link{display:inline-flex;margin-bottom:22px;color:#8b3aa5;text-decoration:none;font-weight:800}
@media(max-width:760px){.feature-grid{grid-template-columns:1fr}.tool-topline{justify-content:center}.footer-inner{gap:14px}.legal-card{padding:26px 20px}.nav a:nth-child(3){display:none}}
@media(max-width:520px){.brand-text{font-size:15px}.tool-shell{margin-top:25px}.feature-grid article{padding:22px}}

/* v4: in-page playable video preview */
.result-card{width:min(820px,100%);padding:20px}.video-result{display:grid;gap:14px}.player-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.preview-tip{color:#7c7079;font-size:12px;font-weight:700}.video-player-wrap{position:relative;width:100%;max-height:560px;overflow:hidden;border-radius:20px;background:#0c0a0d;box-shadow:0 16px 36px rgba(39,18,34,.18)}.result-video{display:block;width:100%;height:min(62vw,560px);min-height:280px;object-fit:contain;background:#0c0a0d}.result-meta-wide h3{margin:2px 0 8px;font-size:20px;line-height:1.35}.media-option{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 14px;border:1px solid #eadfe7;border-radius:14px;background:#fff;transition:.18s ease}.media-option.active{border-color:rgba(193,53,132,.45);box-shadow:0 0 0 3px rgba(193,53,132,.06)}.media-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.preview-btn,.download-btn{border:0;border-radius:10px;padding:10px 13px;font-size:12px;font-weight:850;white-space:nowrap}.preview-btn{background:#f7eff7;color:#8a2c74}.preview-btn:hover{background:#f1e3f0}.download-btn{background:linear-gradient(105deg,var(--orange),var(--pink) 50%,var(--purple));color:#fff;box-shadow:0 8px 18px rgba(193,53,132,.16)}.download-btn:hover{filter:saturate(1.06);transform:translateY(-1px)}
@media(max-width:600px){.result-card{padding:12px}.result-video{height:115vw;max-height:520px;min-height:300px}.player-head{padding:2px 4px}.media-option{align-items:flex-start;flex-direction:column}.media-actions{width:100%}.preview-btn,.download-btn{flex:1;text-align:center}.result-meta-wide{padding:0 3px 4px}}