@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #0b0b0f;
  --surface: #121217;
  --surface-2: #19191f;
  --line: rgba(255,255,255,.1);
  --text: #f5f4f7;
  --muted: #9d9aa6;
  --purple: #8d5cf6;
  --purple-light: #bda2ff;
  --pink: #e058b9;
  --input: #0d0d12;
  --subtle: #777481;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: 'DM Sans', system-ui, sans-serif; min-height: 100vh; transition: background-color .25s, color .25s; }
body[data-theme="light"] {
  --bg: #f6f4fa;
  --surface: #ffffff;
  --surface-2: #ece8f4;
  --line: rgba(32,24,48,.13);
  --text: #17131e;
  --muted: #6f687a;
  --purple: #7444dc;
  --purple-light: #6c3dd0;
  --input: #f2eff7;
  --subtle: #736c7d;
  color-scheme: light;
}
button, input, select { font: inherit; }
a { color: inherit; text-decoration: none; }
.noise { position: fixed; inset: 0; pointer-events: none; opacity: .025; z-index: 10; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.sr-only { position: absolute; width: 1px; height: 1px; clip: rect(0,0,0,0); overflow: hidden; }

.site-header { width: min(1180px, calc(100% - 48px)); height: 88px; margin: auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); position: relative; z-index: 5; }
.brand { display: inline-flex; align-items: center; gap: 11px; font: 800 19px/1 'Manrope', sans-serif; letter-spacing: -.6px; }
.brand > span:last-child > span { color: var(--purple-light); }
.brand-mark { width: 31px; height: 31px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(145deg, var(--purple), #6135c8); box-shadow: 0 6px 22px rgba(141,92,246,.25); transform: rotate(-8deg); }
.brand-mark span { width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid white; margin-left: 2px; transform: rotate(8deg); }
nav { display: flex; align-items: center; gap: 36px; color: #b9b6c0; font-size: 14px; }
nav a { transition: color .2s; }
nav a:hover { color: white; }
.header-action { padding: 11px 17px; border: 1px solid var(--line); border-radius: 9px; font-size: 13px; font-weight: 600; background: rgba(255,255,255,.035); }
.header-action span { color: var(--purple-light); margin-left: 7px; }
.header-controls { display: flex; align-items: center; gap: 10px; }
.theme-toggle { min-height: 40px; padding: 0 13px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.035); color: var(--text); cursor: pointer; font-size: 12px; font-weight: 600; }
.theme-toggle-icon { color: var(--purple-light); font-size: 17px; line-height: 1; }
body[data-theme="light"] .header-action,
body[data-theme="light"] .theme-toggle { background: rgba(255,255,255,.72); }

.hero { min-height: 760px; padding: 105px 24px 76px; text-align: center; position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; width: 580px; height: 580px; left: 50%; top: -350px; transform: translateX(-50%); background: rgba(133,79,248,.17); filter: blur(95px); border-radius: 50%; pointer-events: none; }
.hero-glow { position: absolute; width: 360px; height: 150px; left: 50%; top: 310px; transform: translateX(-50%); background: rgba(150,89,255,.11); filter: blur(75px); pointer-events: none; }
.eyebrow { color: #b4a0df; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 2.4px; margin: 0 0 20px; }
.eyebrow span { display: inline-block; width: 17px; height: 1px; background: var(--purple); vertical-align: middle; margin: 0 8px 3px 0; }
.hero h1, .section-heading h2, .faq h2 { font-family: 'Manrope', sans-serif; letter-spacing: -3px; margin: 0; }
.hero h1 { font-size: clamp(44px, 6.4vw, 80px); line-height: 1.05; font-weight: 600; }
.hero h1 em, .faq h2 em { font-style: normal; color: transparent; -webkit-text-stroke: 1px #8f8b99; }
body[data-theme="light"] .hero h1 em,
body[data-theme="light"] .faq h2 em { -webkit-text-stroke-color: #756d80; }
.hero-copy { width: min(600px, 100%); margin: 26px auto 40px; color: var(--muted); font-size: 17px; line-height: 1.7; }

.download-card { width: min(920px, 100%); margin: auto; border: 1px solid var(--line); border-radius: 18px; padding: 17px; background: rgba(20,20,26,.84); backdrop-filter: blur(18px); box-shadow: 0 28px 80px rgba(0,0,0,.36); text-align: left; position: relative; z-index: 1; }
.platform-row { display: flex; gap: 4px; margin-bottom: 13px; overflow-x: auto; scrollbar-width: none; }
.platform { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border: 0; border-radius: 7px; color: #777481; background: transparent; white-space: nowrap; font-size: 12px; transition: .25s; cursor: pointer; user-select: none; }
.platform.active { color: #dedbe5; background: rgba(255,255,255,.055); }
.platform:hover { color: var(--text); background: rgba(255,255,255,.035); }
.platform:focus-visible { outline: 2px solid var(--purple-light); outline-offset: 2px; }
body[data-theme="light"] .platform.active { color: var(--text); background: rgba(116,68,220,.1); }
.platform b { font-family: Arial, sans-serif; font-size: 14px; }
.youtube-icon { color: #ff4560; }
.instagram-icon { color: #ea62aa; }
.tiktok-icon { color: #66e7ef; text-shadow: 1px 1px #ee3a66; }
.facebook-icon { color: #5a89ff; }
.threads-icon { color: #c278f2; }
.x-icon { color: var(--text); font-size: 13px !important; }
.input-shell { display: grid; grid-template-columns: 34px 1fr auto auto; align-items: center; min-height: 64px; border-radius: 11px; background: #0d0d12; border: 1px solid rgba(255,255,255,.09); padding: 7px; transition: border-color .2s, box-shadow .2s; cursor: text; }
.input-shell { background: var(--input); border-color: var(--line); }
.input-shell:focus-within { border-color: rgba(166,124,255,.65); box-shadow: 0 0 0 4px rgba(141,92,246,.09); }
.link-icon { color: #777482; font-size: 20px; transform: rotate(-45deg); text-align: center; pointer-events: none; }
.input-shell input { min-width: 0; width: 100%; height: 48px; border: 0; outline: 0; background: transparent; color: #eee; font-size: 14px; padding: 0 8px; position: relative; z-index: 1; cursor: text; }
body[data-theme="light"] .input-shell input { color: var(--text); }
.input-shell input::placeholder { color: #5e5b66; }
.paste-button { color: #aaa5b2; border: 0; background: transparent; padding: 11px 13px; cursor: pointer; font-size: 12px; }
.analyze-button { height: 49px; border: 0; border-radius: 8px; padding: 0 18px; color: white; font-size: 13px; font-weight: 700; background: linear-gradient(135deg, #8855ed, #6936ce); cursor: pointer; display: flex; align-items: center; gap: 23px; box-shadow: 0 7px 22px rgba(109,54,211,.28); transition: transform .2s, filter .2s; }
.analyze-button:hover { transform: translateY(-1px); filter: brightness(1.08); }
.analyze-button:disabled { opacity: .65; cursor: wait; transform: none; }
.analyze-button i { font-style: normal; font-size: 19px; font-weight: 400; }
.form-message { color: #686571; font-size: 11px; margin: 10px 4px 0; min-height: 16px; }
.form-message.error { color: #ff758d; }
.form-message.success { color: #8ee7be; }

.result { display: grid; grid-template-columns: 130px 1fr 155px; gap: 18px; align-items: center; border-top: 1px solid var(--line); margin-top: 16px; padding: 17px 2px 1px; }
.result-media { height: 78px; background: #24232b; border-radius: 9px; overflow: hidden; position: relative; display: grid; place-items: center; }
.result-media img { width: 100%; height: 100%; object-fit: cover; }
.result-placeholder { position: absolute; color: white; font-size: 18px; }
.result-info { min-width: 0; }
.result-platform { color: var(--purple-light); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.result-info h2 { font: 600 15px/1.4 'Manrope', sans-serif; margin: 5px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.result-info p { color: #777481; font-size: 11px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dot { margin: 0 7px; }
.download-form { display: grid; grid-template-columns: 1fr; gap: 6px; }
.download-form label { font-size: 9px; text-transform: uppercase; letter-spacing: 1px; color: #777481; }
.download-form select { width: 100%; color: var(--text); background: var(--input); border: 1px solid var(--line); border-radius: 7px; padding: 8px; outline: none; font-size: 11px; }
.download-form button { color: white; background: var(--purple); border: 0; border-radius: 7px; padding: 9px; font-size: 11px; font-weight: 700; cursor: pointer; }
.download-form button span { margin-left: 5px; }
.trust-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 34px; margin-top: 24px; color: #777481; font-size: 11px; }
.trust-row i { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: rgba(141,92,246,.12); color: #a97dfc; font-style: normal; margin-right: 6px; }

.how { width: min(1180px, calc(100% - 48px)); margin: auto; border-top: 1px solid var(--line); padding: 100px 0 115px; }
.section-heading { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 40px; }
.section-heading .eyebrow { grid-column: 1 / -1; margin-bottom: -15px; }
.section-heading h2 { font-size: clamp(36px, 4vw, 54px); line-height: 1.1; font-weight: 600; }
.section-heading > p:last-child { color: var(--muted); line-height: 1.7; max-width: 440px; justify-self: end; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 60px; }
.steps article { min-height: 280px; border: 1px solid var(--line); border-radius: 15px; background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); padding: 27px; position: relative; overflow: hidden; }
body[data-theme="light"] .download-card,
body[data-theme="light"] .steps article { background: rgba(255,255,255,.76); box-shadow: 0 24px 70px rgba(45,28,73,.09); }
body[data-theme="light"] .hero::before { background: rgba(133,79,248,.12); }
.steps article::after { content: ''; position: absolute; width: 100px; height: 100px; right: -50px; bottom: -50px; border-radius: 50%; background: rgba(141,92,246,.1); filter: blur(26px); }
.step-number { position: absolute; top: 25px; right: 25px; color: #44414c; font: 600 12px 'Manrope', sans-serif; }
.step-icon { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 48px; border: 1px solid rgba(170,130,255,.22); border-radius: 12px; background: rgba(141,92,246,.07); color: #b490ff; font-size: 24px; }
.steps h3 { font: 600 18px 'Manrope', sans-serif; margin: 0 0 12px; }
.steps p { color: #85818d; font-size: 13px; line-height: 1.7; margin: 0; }

.faq { width: min(1180px, calc(100% - 48px)); margin: auto; padding: 105px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 90px; }
.faq h2 { font-size: clamp(40px, 5vw, 62px); line-height: 1.07; font-weight: 600; }
.faq-copy > p { color: var(--muted); font-size: 14px; line-height: 1.8; margin: 0 0 26px; }
details { border-top: 1px solid var(--line); padding: 20px 0; }
details:last-child { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; list-style: none; font-size: 14px; display: flex; justify-content: space-between; }
summary::-webkit-details-marker { display: none; }
summary span { color: var(--purple-light); font-size: 19px; transition: transform .2s; }
details[open] summary span { transform: rotate(45deg); }
details p { color: var(--muted); font-size: 13px; line-height: 1.7; margin: 14px 0 0; }

footer { width: min(1180px, calc(100% - 48px)); margin: auto; min-height: 110px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; color: #6e6b75; font-size: 11px; }

@media (max-width: 760px) {
  .site-header { width: calc(100% - 32px); height: 72px; }
  nav { display: none; }
  .header-action { display: none; }
  .theme-toggle-text { display: none; }
  .theme-toggle { width: 40px; justify-content: center; padding: 0; }
  .hero { padding: 75px 16px 60px; min-height: auto; }
  .hero h1 { letter-spacing: -2px; }
  .hero-copy { font-size: 15px; }
  .download-card { padding: 11px; }
  .platform-row { margin-bottom: 9px; }
  .input-shell { grid-template-columns: 28px 1fr auto; padding: 5px; }
  .paste-button { display: none; }
  .analyze-button { width: 50px; padding: 0; justify-content: center; }
  .analyze-button span { display: none; }
  .result { grid-template-columns: 86px 1fr; }
  .result-media { height: 62px; }
  .download-form { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; align-items: end; }
  .download-form label { grid-column: 1 / -1; }
  .trust-row { gap: 14px; }
  .how, .faq, footer { width: calc(100% - 32px); }
  .how { padding: 75px 0; }
  .section-heading, .faq { grid-template-columns: 1fr; gap: 24px; }
  .section-heading > p:last-child { justify-self: start; }
  .steps { grid-template-columns: 1fr; margin-top: 38px; }
  .steps article { min-height: 235px; }
  .faq { padding: 75px 0; }
  footer { padding: 28px 0; flex-direction: column; align-items: flex-start; gap: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}