/* ═══════════════════════════════════════════════════════════
   TikSave — Stylesheet v2
   Font: Plus Jakarta Sans (display) + Inter (body)
   Theme: deep dark, crimson accent
   CWV: contain, content-visibility, no layout-shift tricks
═══════════════════════════════════════════════════════════ */

/* ── Design tokens ──────────────────────────────────────── */
:root {
  /* Colors */
  --bg:           #08080f;
  --bg2:          #0e0e1a;
  --bg3:          #141420;
  --surface:      #1a1a28;
  --surface2:     #222234;
  --border:       rgba(255,255,255,0.06);
  --border2:      rgba(255,255,255,0.11);
  --text:         #eeeef8;
  --text2:        #8888aa;
  --text3:        #4c4c6a;
  --accent:       #ff2d55;
  --accent2:      #ff6b35;
  --accent-muted: rgba(255,45,85,0.12);
  --accent-glow:  rgba(255,45,85,0.25);
  --blue:         #3d7eff;
  --green:        #00d68f;
  --yellow:       #ff9f0a;

  /* Typography */
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  /* Spacing */
  --section-gap: 96px;
  --r:           14px;
  --r-sm:        8px;
  --r-lg:        20px;

  /* Shadows */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.3);
  --shadow:     0 8px 32px rgba(0,0,0,0.45);
  --shadow-lg:  0 24px 64px rgba(0,0,0,0.6);

  /* Motion */
  --ease:       cubic-bezier(0.4,0,0.2,1);
  --duration:   0.18s;
}

/* ── Reset ───────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; text-size-adjust:100%; -webkit-text-size-adjust:100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Screen-reader only */
.sr-only {
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

img,svg { display:block; }
a { color:inherit; text-decoration:none; }
button { cursor:pointer; font-family:inherit; }
ol,ul { list-style:none; }

/* ── Noise texture ───────────────────────────────────────── */
.noise {
  position:fixed; inset:0; pointer-events:none; z-index:0;
  opacity:0.02;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px;
}

/* ── Layout ──────────────────────────────────────────────── */
.container { max-width:1100px; margin:0 auto; padding:0 24px; }

/* ── Header ──────────────────────────────────────────────── */
.header {
  position:sticky; top:0; z-index:100;
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  background:rgba(8,8,15,0.82);
  border-bottom:1px solid var(--border);
  contain:layout style;
}
.header-inner {
  display:flex; align-items:center; justify-content:space-between;
  height:62px;
}

/* Logo */
.logo {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:800;
  font-size:1.2rem; letter-spacing:-0.02em; color:var(--text);
}
.logo-text { line-height:1; }

/* Lang switcher */
.lang-switcher { position:relative; }
.lang-btn {
  display:flex; align-items:center; gap:7px;
  background:var(--surface); border:1px solid var(--border);
  color:var(--text2); padding:7px 13px;
  border-radius:var(--r-sm); font-size:0.84rem;
  font-family:var(--font-body);
  transition:border-color var(--duration) var(--ease),
             color var(--duration) var(--ease);
}
.lang-btn .caret { color:var(--text3); transition:transform var(--duration) var(--ease); }
.lang-btn[aria-expanded="true"] .caret { transform:rotate(180deg); }
.lang-btn:hover { border-color:var(--border2); color:var(--text); }

.lang-dropdown {
  position:absolute; top:calc(100% + 6px); right:0;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r); padding:6px;
  min-width:168px; max-height:300px; overflow-y:auto;
  box-shadow:var(--shadow-lg); display:none; z-index:200;
}
.lang-dropdown.open { display:block; animation:fadeDown 0.14s var(--ease); }
.lang-option {
  display:block; padding:8px 11px; border-radius:var(--r-sm);
  color:var(--text2); font-size:0.86rem;
  transition:background var(--duration),color var(--duration);
}
.lang-option:hover { background:var(--surface2); color:var(--text); }
.lang-option.active { color:var(--accent); background:var(--accent-muted); }

/* ── Hero ────────────────────────────────────────────────── */
.hero {
  position:relative; overflow:hidden;
  padding:80px 0 72px; min-height:86vh;
  display:flex; align-items:center;
}
.hero-bg { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.orb {
  position:absolute; border-radius:50%;
  filter:blur(90px); opacity:0.28;
  will-change:transform;
}
.orb1 {
  width:560px; height:560px;
  background:radial-gradient(circle, #ff2d55 0%, transparent 70%);
  top:-220px; left:-120px;
  animation:orbFloat 9s ease-in-out infinite alternate;
}
.orb2 {
  width:440px; height:440px;
  background:radial-gradient(circle, #3d7eff 0%, transparent 70%);
  bottom:-160px; right:-80px;
  animation:orbFloat 11s ease-in-out infinite alternate-reverse;
}
.orb3 {
  width:320px; height:320px;
  background:radial-gradient(circle, #ff6b35 0%, transparent 70%);
  top:40%; left:58%; opacity:0.18;
  animation:orbFloat 13s ease-in-out infinite alternate;
}
@keyframes orbFloat {
  from { transform:translate(0,0) scale(1); }
  to   { transform:translate(28px,-28px) scale(1.06); }
}

.hero-inner { position:relative; z-index:1; text-align:center; max-width:800px; margin:0 auto; }

/* Eyebrow */
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--accent-muted); border:1px solid rgba(255,45,85,0.22);
  color:var(--accent); padding:5px 15px;
  border-radius:100px; font-size:0.78rem;
  font-weight:600; letter-spacing:0.04em;
  text-transform:uppercase; margin-bottom:22px;
  animation:fadeUp 0.5s var(--ease) both;
}
.eyebrow-dot {
  width:6px; height:6px; background:var(--accent);
  border-radius:50%; animation:pulse 2s ease infinite;
}
@keyframes pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:0.45; transform:scale(0.75); }
}

/* H1 */
.hero-title {
  font-family:var(--font-display);
  font-size:clamp(2.4rem,6.5vw,4.4rem);
  font-weight:800; letter-spacing:-0.04em; line-height:1.06;
  color:var(--text); margin-bottom:18px;
  animation:fadeUp 0.5s 0.08s var(--ease) both;
}
.hero-title em {
  font-style:normal;
  background:linear-gradient(130deg, #fff 20%, #ff2d55 60%, #ff6b35 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* Hero desc */
.hero-desc {
  font-size:1.08rem; color:var(--text2); max-width:560px;
  margin:0 auto 38px; line-height:1.75; font-weight:300;
  animation:fadeUp 0.5s 0.16s var(--ease) both;
}

/* ── Download tool ───────────────────────────────────────── */
.dl-tool { animation:fadeUp 0.5s 0.24s var(--ease) both; }

.dl-input-wrap {
  display:flex; gap:10px;
  background:var(--surface);
  border:1px solid var(--border2);
  border-radius:var(--r-lg); padding:10px;
  box-shadow:var(--shadow), 0 0 0 1px rgba(255,45,85,0.04);
  position:relative;
}
/* Subtle gradient border */
.dl-input-wrap::before {
  content:''; position:absolute; inset:-1px;
  border-radius:var(--r-lg);
  background:linear-gradient(135deg, rgba(255,45,85,0.18), transparent 50%, rgba(61,126,255,0.1));
  pointer-events:none; z-index:-1;
}

.dl-input-inner {
  flex:1; display:flex; align-items:center; gap:8px;
  background:var(--bg2); border:1px solid var(--border);
  border-radius:12px; padding:0 12px;
  transition:border-color var(--duration) var(--ease),
             box-shadow var(--duration) var(--ease);
}
.dl-input-inner:focus-within {
  border-color:rgba(255,45,85,0.4);
  box-shadow:0 0 0 3px rgba(255,45,85,0.07);
}

.dl-input-icon { color:var(--text3); flex-shrink:0; }
.dl-input {
  flex:1; background:none; border:none; outline:none;
  color:var(--text); font-size:0.95rem;
  font-family:var(--font-body); padding:14px 0;
  min-width:0;
}
.dl-input::placeholder { color:var(--text3); }

.paste-btn {
  background:none; border:none; color:var(--text3);
  padding:6px; border-radius:6px; flex-shrink:0;
  display:flex; align-items:center;
  transition:color var(--duration),background var(--duration);
}
.paste-btn:hover { color:var(--text); background:var(--surface2); }

/* Primary button */
.btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  color:#fff; border:none;
  padding:14px 26px; border-radius:12px;
  font-size:0.95rem; font-weight:700;
  font-family:var(--font-display);
  white-space:nowrap; flex-shrink:0;
  box-shadow:0 4px 20px var(--accent-glow);
  transition:transform var(--duration) var(--ease),
             box-shadow var(--duration) var(--ease);
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 30px var(--accent-glow); }
.btn-primary:active { transform:translateY(0); }

/* Loading state */
.dl-loading {
  text-align:center; padding:28px;
  color:var(--text2); display:flex;
  flex-direction:column; align-items:center; gap:14px;
}
/* ── CWV note: use 'hidden' attr + CSS, not display:none via JS ── */
[hidden] { display:none !important; }

.spinner {
  width:38px; height:38px;
  border:3px solid var(--surface2);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin 0.75s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* Error state */
.dl-error {
  display:flex; align-items:center; gap:10px;
  background:rgba(255,45,85,0.08); border:1px solid rgba(255,45,85,0.18);
  color:#ff7090; padding:13px 18px;
  border-radius:var(--r); margin-top:14px;
  font-size:0.9rem;
}

/* Result card */
.result-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); overflow:hidden;
  margin-top:20px; box-shadow:var(--shadow);
  animation:fadeUp 0.35s var(--ease);
}
.result-inner { display:flex; }

.result-thumb-wrap {
  width:148px; min-height:196px; flex-shrink:0;
  position:relative; overflow:hidden; background:var(--bg2);
}
.result-thumb-wrap img { width:100%; height:100%; object-fit:cover; }
.thumb-overlay {
  position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center;
  background:rgba(0,0,0,0.28);
}

.result-info { flex:1; padding:22px; text-align:left; }
.result-title {
  font-family:var(--font-display); font-size:0.97rem;
  font-weight:700; color:var(--text); margin-bottom:12px;
  display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
}

/* Meta dl */
.result-meta { margin-bottom:18px; display:flex; flex-wrap:wrap; gap:10px; }
.meta-row { display:flex; align-items:center; gap:5px; }
.meta-row dt {
  display:flex; align-items:center; gap:4px;
  color:var(--text3); font-size:0.8rem;
}
.meta-row dd { color:var(--text2); font-size:0.82rem; font-weight:500; }

/* Action buttons */
.result-actions { display:flex; flex-wrap:wrap; gap:9px; }

.btn-dl-video,.btn-dl-audio {
  display:inline-flex; align-items:center; gap:7px;
  padding:10px 17px; border-radius:var(--r-sm);
  font-size:0.84rem; font-weight:600;
  font-family:var(--font-display);
  transition:transform var(--duration),box-shadow var(--duration);
}
.btn-dl-video {
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  color:#fff; box-shadow:0 3px 14px var(--accent-glow);
}
.btn-dl-video:hover { transform:translateY(-1px); box-shadow:0 6px 22px var(--accent-glow); }
.btn-dl-audio {
  background:var(--surface2); color:var(--text);
  border:1px solid var(--border);
}
.btn-dl-audio:hover { border-color:var(--border2); }

.btn-new {
  display:inline-flex; align-items:center; gap:6px;
  background:none; border:1px solid var(--border);
  color:var(--text2); padding:10px 14px;
  border-radius:var(--r-sm); font-size:0.84rem;
  font-family:var(--font-body);
  transition:border-color var(--duration),color var(--duration);
}
.btn-new:hover { border-color:var(--border2); color:var(--text); }

/* ── Section base ────────────────────────────────────────── */
.section { padding:var(--section-gap) 0; position:relative; z-index:1; }
.section-title {
  font-family:var(--font-display);
  font-size:clamp(1.75rem,3.5vw,2.6rem);
  font-weight:800; letter-spacing:-0.03em;
  text-align:center; color:var(--text); margin-bottom:12px;
}
.section-sub {
  text-align:center; color:var(--text2);
  font-size:1rem; margin-bottom:48px;
  max-width:560px; margin-left:auto; margin-right:auto;
}

/* ── Trust bar ───────────────────────────────────────────── */
.trust-bar {
  background:var(--bg2); border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:28px 0; position:relative; z-index:1;
}
.trust-inner {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.trust-item {
  display:flex; flex-direction:column; align-items:center;
  gap:5px; text-align:center;
  padding:12px 8px; border-radius:var(--r);
}
.trust-item svg { color:var(--accent); margin-bottom:2px; }
.trust-item strong {
  font-family:var(--font-display); font-size:1.55rem;
  font-weight:800; color:var(--text); letter-spacing:-0.02em;
}
.trust-item span { font-size:0.78rem; color:var(--text2); font-weight:500; letter-spacing:0.02em; }

/* ── How-to ──────────────────────────────────────────────── */
.how-section { background:var(--bg2); }
.steps-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:22px; counter-reset:none;
}
.step-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r); padding:30px 26px;
  position:relative; overflow:hidden;
  transition:border-color var(--duration),transform var(--duration),box-shadow var(--duration);
  contain:layout style;
}
.step-card:hover { border-color:var(--border2); transform:translateY(-4px); box-shadow:var(--shadow); }

.step-num {
  font-family:var(--font-display); font-size:3.8rem;
  font-weight:800; color:rgba(255,45,85,0.07);
  position:absolute; top:14px; right:20px; line-height:1;
  user-select:none; pointer-events:none;
}
.step-icon {
  width:52px; height:52px; background:var(--accent-muted);
  border-radius:13px; display:flex; align-items:center;
  justify-content:center; color:var(--accent); margin-bottom:18px;
}
.step-card h3 {
  font-family:var(--font-display); font-weight:700;
  font-size:1.05rem; color:var(--text); margin-bottom:9px;
}
.step-card p { color:var(--text2); font-size:0.9rem; line-height:1.65; }

/* ── Formats ─────────────────────────────────────────────── */
.formats-section { background:var(--bg3); }
.formats-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
}
.fmt-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r); padding:24px 20px;
  transition:border-color var(--duration),transform var(--duration);
  contain:layout style;
}
.fmt-card:hover { border-color:var(--border2); transform:translateY(-3px); }
.fmt-badge {
  display:inline-block;
  background:color-mix(in srgb, var(--badge-color) 15%, transparent);
  color:var(--badge-color);
  border:1px solid color-mix(in srgb, var(--badge-color) 30%, transparent);
  font-family:var(--font-display); font-size:0.72rem;
  font-weight:800; letter-spacing:0.06em;
  padding:4px 10px; border-radius:6px;
  margin-bottom:14px; text-transform:uppercase;
}
/* Fallback for no color-mix support */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .fmt-badge { background:rgba(255,45,85,0.12); color:var(--accent); border-color:rgba(255,45,85,0.25); }
}
.fmt-card h3 {
  font-family:var(--font-display); font-weight:700;
  font-size:0.97rem; color:var(--text); margin-bottom:8px;
}
.fmt-card p { color:var(--text2); font-size:0.87rem; line-height:1.6; }

/* ── Features ────────────────────────────────────────────── */
.features-section { background:var(--bg); }
.features-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
.feat-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r); padding:26px 22px;
  transition:border-color var(--duration),background var(--duration);
  contain:layout style;
}
.feat-card:hover { border-color:rgba(255,45,85,0.18); background:var(--bg3); }
.feat-icon {
  width:46px; height:46px; background:var(--accent-muted);
  border-radius:12px; display:flex; align-items:center;
  justify-content:center; color:var(--accent); margin-bottom:16px;
}
.feat-card h3 {
  font-family:var(--font-display); font-weight:700;
  font-size:0.98rem; color:var(--text); margin-bottom:7px;
}
.feat-card p { color:var(--text2); font-size:0.87rem; line-height:1.65; }

/* ── About ───────────────────────────────────────────────── */
.about-section { background:var(--bg2); }
.about-inner {
  display:grid; grid-template-columns:1fr 300px; gap:56px; align-items:start;
}
.about-text h2 {
  font-family:var(--font-display); font-size:clamp(1.4rem,2.5vw,2rem);
  font-weight:800; letter-spacing:-0.02em; color:var(--text);
  margin-bottom:22px;
}
.about-text p {
  color:var(--text2); font-size:0.96rem; line-height:1.8;
  margin-bottom:16px;
}
.about-text p:last-child { margin-bottom:0; }

.cta-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:28px 24px;
  text-align:center; position:sticky; top:80px;
}
.cta-label {
  font-family:var(--font-display); font-weight:700;
  font-size:1rem; color:var(--text); margin-bottom:16px;
}
.cta-card .btn-primary { width:100%; justify-content:center; margin-bottom:18px; }
.cta-bullets {
  list-style:none; text-align:left; display:flex;
  flex-direction:column; gap:7px;
}
.cta-bullets li { color:var(--text2); font-size:0.86rem; }

/* ── FAQ ─────────────────────────────────────────────────── */
.faq-section { background:var(--bg); }
.faq-list { max-width:740px; margin:0 auto; display:flex; flex-direction:column; gap:10px; }

.faq-item {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r); overflow:hidden;
  transition:border-color var(--duration);
}
.faq-item.open { border-color:rgba(255,45,85,0.2); }

.faq-q {
  width:100%; display:flex; align-items:center;
  justify-content:space-between; gap:16px;
  padding:19px 22px; background:none; border:none;
  color:var(--text); font-size:0.95rem; font-weight:500;
  font-family:var(--font-body); text-align:left;
  transition:color var(--duration);
}
.faq-q:hover { color:var(--accent); }
.faq-icon { flex-shrink:0; color:var(--text3); transition:transform var(--duration) var(--ease); }
.faq-item.open .faq-icon { transform:rotate(180deg); color:var(--accent); }

.faq-a { overflow:hidden; transition:max-height 0.28s var(--ease); max-height:0; }
.faq-item.open .faq-a { max-height:240px; }
.faq-a p { padding:0 22px 20px; color:var(--text2); font-size:0.9rem; line-height:1.75; }

/* ── Footer ──────────────────────────────────────────────── */
.footer { background:var(--bg); border-top:1px solid var(--border); padding:56px 0 28px; }
.footer-inner { display:flex; flex-direction:column; gap:44px; }
.footer-top { display:flex; justify-content:space-between; gap:48px; flex-wrap:wrap; }
.footer-brand { max-width:340px; }
.footer-brand .logo { margin-bottom:14px; }
.footer-tagline {
  font-family:var(--font-display); font-weight:700;
  font-size:0.95rem; color:var(--text); margin-bottom:8px;
}
.footer-desc { color:var(--text2); font-size:0.87rem; line-height:1.7; }

.footer-nav-title {
  font-family:var(--font-display); font-weight:700;
  font-size:0.82rem; letter-spacing:0.05em;
  text-transform:uppercase; color:var(--text3); margin-bottom:14px;
}
.footer-langs { display:flex; flex-wrap:wrap; gap:7px; max-width:400px; }
.footer-langs a {
  color:var(--text3); font-size:0.82rem;
  padding:4px 10px; border-radius:100px;
  border:1px solid var(--border);
  transition:color var(--duration),border-color var(--duration),background var(--duration);
}
.footer-langs a:hover,
.footer-langs a.active {
  color:var(--accent); border-color:rgba(255,45,85,0.28);
  background:var(--accent-muted);
}

.footer-bottom {
  border-top:1px solid var(--border); padding-top:22px;
  display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:10px; align-items:center;
}
.footer-bottom > p { color:var(--text3); font-size:0.82rem; }
.footer-links { display:flex; gap:20px; }
.footer-links a { color:var(--text3); font-size:0.82rem; transition:color var(--duration); }
.footer-links a:hover { color:var(--text2); }

.footer-disclaimer {
  color:var(--text3); font-size:0.78rem;
  padding-top:12px; line-height:1.6;
}

/* ── Animations ──────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeDown {
  from { opacity:0; transform:translateY(-7px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── RTL support ─────────────────────────────────────────── */
.rtl { direction:rtl; }
.rtl .dl-input-icon { order:3; }
.rtl .paste-btn { order:1; }
.rtl .dl-input { order:2; }
.rtl .step-num { right:auto; left:18px; }
.rtl .about-inner { direction:rtl; }

/* ── Focus visible (a11y) ────────────────────────────────── */
:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--surface2); border-radius:3px; }

/* ── Selection ───────────────────────────────────────────── */
::selection { background:rgba(255,45,85,0.28); color:#fff; }

/* ════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════ */
@media (max-width:900px) {
  .formats-grid { grid-template-columns:repeat(2,1fr); }
  .about-inner  { grid-template-columns:1fr; gap:32px; }
  .cta-card     { position:static; }
  .trust-inner  { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:680px) {
  :root { --section-gap:64px; }

  .hero { padding:56px 0 48px; min-height:auto; }
  .hero-title { font-size:2.2rem; }
  .steps-grid { grid-template-columns:1fr; }
  .features-grid { grid-template-columns:1fr 1fr; }

  .dl-input-wrap { flex-direction:column; gap:8px; }
  .btn-primary { width:100%; justify-content:center; }

  .result-inner { flex-direction:column; }
  .result-thumb-wrap { width:100%; min-height:170px; max-height:210px; }
  .result-info { padding:18px; }
  .result-actions { flex-direction:column; }
  .btn-dl-video,.btn-dl-audio,.btn-new { justify-content:center; }

  .footer-top { flex-direction:column; gap:28px; }
  .footer-bottom { flex-direction:column; align-items:flex-start; gap:8px; }
}

@media (max-width:440px) {
  .features-grid { grid-template-columns:1fr; }
  .formats-grid  { grid-template-columns:1fr; }
  .trust-inner   { grid-template-columns:1fr 1fr; }
}

/* ── Print ───────────────────────────────────────────────── */
@media print {
  .header,.hero-bg,.noise,.dl-tool { display:none; }
  body { background:#fff; color:#000; }
}