/* ── Reset & Base ─────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --red:       #E5322D;
  --red-h:     #C0211C;
  --red-lt:    #FFF0EF;
  --green:     #16A34A;
  --green-h:   #15803D;
  --green-lt:  #F0FDF4;
  --orange:    #EA580C;
  --orange-h:  #C2410C;
  --orange-lt: #FFF7ED;
  --blue:      #2563EB;
  --purple:    #7C3AED;
  --amber:     #D97706;
  --dark:      #111827;
  --text:      #1F2937;
  --sub:       #6B7280;
  --muted:     #9CA3AF;
  --border:    #E5E7EB;
  --bg:        #F9FAFB;
  --bg2:       #F3F4F6;
  --white:     #FFFFFF;
  --radius:    12px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow:    0 4px 16px rgba(0,0,0,.09);
  --shadow-lg: 0 12px 36px rgba(0,0,0,.12);
  --shadow-xl: 0 24px 64px rgba(0,0,0,.14);
  --transition: .18s cubic-bezier(.4,0,.2,1);
}

html { scroll-behavior:smooth; }
body {
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--text); background:var(--white);
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
a { text-decoration:none; color:inherit; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }
img { max-width:100%; display:block; }

/* ── Utility ──────────────────────────────────────── */
.hidden { display:none!important; }
.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; }
.section-inner { max-width:1200px; margin:0 auto; padding:0 24px; }

/* ── Top Announcement Banner ──────────────────────── */
.top-banner {
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:linear-gradient(90deg,#0B1628 0%,#0E3048 40%,#0B1628 100%);
  border-bottom:1px solid rgba(20,184,166,.2);
  padding:9px 20px; text-decoration:none;
  font-size:.82rem; color:rgba(255,255,255,.78);
  text-align:center; flex-wrap:wrap; cursor:pointer;
  transition:background var(--transition);
  position:relative; z-index:1000;
}
.top-banner:hover { background:linear-gradient(90deg,#0d2038 0%,#133d5e 40%,#0d2038 100%); color:#fff; }
.top-banner strong { color:#14B8A6; font-weight:800; }
.top-banner-cta {
  display:inline-flex; align-items:center;
  padding:3px 10px; border-radius:999px;
  background:rgba(20,184,166,.18); border:1px solid rgba(20,184,166,.35);
  color:#14B8A6; font-weight:700; font-size:.75rem; margin-left:4px;
  transition:background .15s;
}
.top-banner:hover .top-banner-cta { background:rgba(20,184,166,.3); }

/* ── Header ───────────────────────────────────────── */
.site-header {
  position:sticky; top:0; z-index:999;
  background:var(--white);
  border-bottom:1px solid var(--border);
  box-shadow:0 1px 8px rgba(0,0,0,.06);
}
.header-inner {
  max-width:1200px; margin:0 auto;
  padding:0 24px; height:64px;
  display:flex; align-items:center; gap:20px;
}
.site-logo {
  display:inline-flex; align-items:center; gap:9px;
  flex-shrink:0; user-select:none; text-decoration:none;
}
.site-logo .logo-icon {
  width:36px; height:36px; border-radius:9px;
  background:linear-gradient(135deg,var(--red) 0%,#FF6B6B 100%);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; box-shadow:0 4px 12px rgba(229,50,45,.3);
}
.site-logo .logo-text {
  font-size:1.15rem; font-weight:800; color:var(--dark);
  letter-spacing:-.025em; line-height:1;
}
.site-logo .logo-text strong { color:var(--red); font-weight:900; }

.site-nav {
  display:flex; align-items:center; gap:2px; flex:1;
}
.site-nav a {
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 13px; border-radius:8px;
  font-size:.83rem; font-weight:600; letter-spacing:.01em;
  color:var(--sub); white-space:nowrap;
  transition:background var(--transition), color var(--transition);
}
.site-nav a:hover { background:var(--bg); color:var(--text); }
.site-nav a.active { color:var(--red); background:var(--red-lt); }

.header-right { display:flex; align-items:center; gap:10px; margin-left:auto; flex-shrink:0; }
.badge-free {
  display:inline-flex; align-items:center;
  padding:5px 14px; border-radius:999px;
  background:var(--green-lt); color:var(--green);
  font-size:.78rem; font-weight:700; letter-spacing:.04em;
  border:1px solid #BBF7D0;
}

/* Hamburger (mobile) */
.menu-toggle {
  display:none; flex-direction:column; gap:5px;
  width:36px; height:36px; padding:6px;
  border-radius:8px; cursor:pointer;
  transition:background var(--transition);
}
.menu-toggle span { display:block; height:2px; background:var(--text); border-radius:2px; transition:all .2s; }
.menu-toggle:hover { background:var(--bg); }

/* ── Hero Section ─────────────────────────────────── */
.hero-section {
  background:linear-gradient(160deg,#FAFBFF 0%,#F0F4FF 40%,#FFF5F5 100%);
  padding:80px 24px 72px;
  position:relative; overflow:hidden;
}
.hero-section::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(229,50,45,.06) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(37,99,235,.05) 0%, transparent 50%);
}
.hero-inner {
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr;
  gap:60px; align-items:center;
  position:relative; z-index:1;
}
.hero-content { max-width:580px; }
.hero-kicker {
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 14px; border-radius:999px;
  background:rgba(229,50,45,.09); border:1px solid rgba(229,50,45,.2);
  color:var(--red); font-size:.8rem; font-weight:700; letter-spacing:.04em;
  margin-bottom:22px;
}
.hero-kicker::before {
  content:''; width:7px; height:7px; border-radius:50%;
  background:var(--red); flex-shrink:0;
}
.hero-h1 {
  font-size:clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight:900; line-height:1.1; letter-spacing:-.03em;
  color:var(--dark); margin-bottom:20px;
}
.hero-h1 span { color:var(--red); }
.hero-desc {
  font-size:1.07rem; color:var(--sub); line-height:1.75;
  max-width:500px; margin-bottom:34px;
}
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:32px; }
.btn-primary-xl {
  display:inline-flex; align-items:center; gap:8px;
  padding:15px 32px; border-radius:12px;
  background:var(--red); color:#fff;
  font-size:1rem; font-weight:800; letter-spacing:.01em;
  box-shadow:0 8px 24px rgba(229,50,45,.35);
  transition:background var(--transition), transform .14s, box-shadow .14s;
  border:none; cursor:pointer; font-family:inherit;
}
.btn-primary-xl:hover { background:var(--red-h); transform:translateY(-2px); box-shadow:0 12px 32px rgba(229,50,45,.4); }
.btn-ghost-xl {
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 28px; border-radius:12px;
  border:2px solid var(--border); background:var(--white);
  color:var(--text); font-size:1rem; font-weight:700;
  transition:border-color var(--transition), box-shadow var(--transition), transform .14s;
}
.btn-ghost-xl:hover { border-color:var(--red); color:var(--red); transform:translateY(-2px); box-shadow:var(--shadow); }

.hero-trust { display:flex; flex-wrap:wrap; gap:16px; }
.hero-trust-item {
  display:inline-flex; align-items:center; gap:6px;
  font-size:.83rem; font-weight:600; color:var(--sub);
}
.hero-trust-item svg { color:var(--green); flex-shrink:0; }

/* Hero visual — right side */
.hero-visual {
  position:relative; display:flex;
  align-items:center; justify-content:center;
}
.hero-vis-card {
  background:var(--white); border-radius:20px;
  box-shadow:var(--shadow-xl); padding:28px;
  width:100%; max-width:380px; position:relative;
}
.hero-vis-top {
  display:flex; align-items:center; gap:10px;
  padding-bottom:16px; margin-bottom:16px;
  border-bottom:1px solid var(--border);
}
.hero-vis-icon {
  width:44px; height:44px; border-radius:10px;
  background:var(--red-lt); display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.hero-vis-info { flex:1; }
.hero-vis-name { font-size:.9rem; font-weight:700; color:var(--dark); }
.hero-vis-sub  { font-size:.78rem; color:var(--muted); }
.hero-vis-tools {
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
}
.hero-vis-tool {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:12px 8px; border-radius:10px;
  border:1.5px solid var(--border); background:var(--bg);
  font-size:.72rem; font-weight:700; color:var(--sub);
  transition:border-color var(--transition), background var(--transition), color var(--transition);
  cursor:pointer;
}
.hero-vis-tool:hover { border-color:var(--red); background:var(--red-lt); color:var(--red); }
.hero-vis-tool svg { width:28px; height:28px; }

/* Floating badges */
.hero-float-badge {
  position:absolute; border-radius:999px;
  padding:7px 14px; font-size:.78rem; font-weight:700;
  box-shadow:var(--shadow); white-space:nowrap;
}
.hfb-1 { top:-10px; right:-10px; background:var(--green-lt); color:var(--green); border:1px solid #BBF7D0; animation:hfloat 3.5s ease-in-out infinite; }
.hfb-2 { bottom:10px; left:-20px; background:#EEF2FF; color:var(--blue); border:1px solid #C7D2FE; animation:hfloat 4s ease-in-out infinite .8s; }
.hfb-3 { top:50%; right:-25px; transform:translateY(-50%); background:#FFF7ED; color:var(--orange); border:1px solid #FED7AA; animation:hfloat 4.5s ease-in-out infinite 1.5s; }
@keyframes hfloat {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-8px); }
}
.hfb-3 { animation-name:hfloat3; }
@keyframes hfloat3 {
  0%,100% { transform:translateY(-50%); }
  50%      { transform:translateY(calc(-50% - 8px)); }
}

/* ── How It Works ─────────────────────────────────── */
.how-section {
  padding:72px 0; background:var(--white);
  border-top:1px solid var(--border);
}
.section-heading {
  text-align:center; margin-bottom:48px;
}
.section-heading h2 {
  font-size:clamp(1.6rem, 3vw, 2.2rem);
  font-weight:900; color:var(--dark);
  letter-spacing:-.025em; margin-bottom:10px;
}
.section-heading p {
  font-size:1rem; color:var(--sub); max-width:520px; margin:0 auto;
}

.steps {
  display:grid; grid-template-columns:1fr auto 1fr auto 1fr;
  gap:16px; align-items:center; max-width:860px; margin:0 auto;
}
.step {
  text-align:center; padding:28px 24px;
  background:var(--bg); border-radius:var(--radius-lg);
  border:1.5px solid var(--border);
  transition:box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.step:hover { box-shadow:var(--shadow); border-color:#D1D5DB; transform:translateY(-4px); }

.step-num {
  width:52px; height:52px; border-radius:50%;
  background:var(--red); color:#fff;
  font-size:1.4rem; font-weight:900; letter-spacing:-.02em;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 16px; box-shadow:0 6px 18px rgba(229,50,45,.3);
}
.step h3 { font-size:1rem; font-weight:800; color:var(--dark); margin-bottom:8px; }
.step p  { font-size:.85rem; color:var(--sub); line-height:1.6; }

.step-arrow { font-size:1.8rem; color:var(--border); font-weight:300; user-select:none; }

/* ── Tools Section ────────────────────────────────── */
.tools-section {
  padding:72px 0 80px;
  background:var(--bg);
  border-top:1px solid var(--border);
}

/* Filter pills */
.filter-row {
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:8px; margin-bottom:36px;
}
.pill {
  padding:8px 20px; border-radius:999px;
  font-size:.84rem; font-weight:600; color:var(--text);
  border:1.5px solid var(--border); background:var(--white);
  transition:all var(--transition); cursor:pointer;
}
.pill:hover  { border-color:#9CA3AF; box-shadow:var(--shadow-sm); }
.pill.active { background:var(--red); color:#fff; border-color:var(--red); box-shadow:0 4px 12px rgba(229,50,45,.3); }

/* Tool grid */
.tool-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.tcard {
  background:var(--white); border:1.5px solid var(--border);
  border-radius:var(--radius); padding:22px 20px;
  cursor:pointer; user-select:none;
  display:flex; flex-direction:column; gap:10px;
  position:relative; overflow:hidden;
  transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.tcard::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--red); transform:scaleX(0); transform-origin:left;
  transition:transform var(--transition);
}
.tcard:hover::before { transform:scaleX(1); }
.tcard:hover {
  transform:translateY(-5px);
  box-shadow:0 8px 28px rgba(0,0,0,.11);
  border-color:#D1D5DB;
}
.tcard--soon { cursor:default; opacity:.55; }
.tcard--soon:hover { transform:none; box-shadow:none; border-color:var(--border); }
.tcard--soon::before { display:none; }

.tcard-icon {
  width:52px; height:52px; border-radius:12px;
  background:var(--ic,var(--bg));
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.tcard-icon svg { width:34px; height:34px; }
.tcard h3 { font-size:.93rem; font-weight:800; color:var(--dark); line-height:1.3; }
.tcard p  { font-size:.79rem; color:var(--sub); line-height:1.55; flex:1; }

.free-tag {
  display:inline-block; align-self:flex-start;
  padding:2px 9px; border-radius:999px;
  font-size:.68rem; font-weight:800; letter-spacing:.05em;
  background:var(--green-lt); color:var(--green);
  border:1px solid #BBF7D0;
}
.soon-tag {
  display:inline-block; align-self:flex-start;
  padding:2px 9px; border-radius:999px;
  font-size:.68rem; font-weight:700; letter-spacing:.03em;
  background:var(--bg2); color:var(--muted);
}

/* ── Features Section ─────────────────────────────── */
.features-section {
  padding:72px 0;
  background:var(--white);
  border-top:1px solid var(--border);
}
.features-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:24px; margin-top:48px;
}
.feat-card {
  padding:28px 24px; border-radius:var(--radius-lg);
  border:1.5px solid var(--border); background:var(--bg);
  text-align:center;
  transition:box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.feat-card:hover { box-shadow:var(--shadow); border-color:#D1D5DB; transform:translateY(-4px); }
.feat-icon {
  width:60px; height:60px; border-radius:16px;
  background:var(--red-lt); display:flex; align-items:center; justify-content:center;
  margin:0 auto 16px;
}
.feat-icon svg { width:30px; height:30px; }
.feat-card h3 { font-size:1rem; font-weight:800; color:var(--dark); margin-bottom:8px; }
.feat-card p  { font-size:.84rem; color:var(--sub); line-height:1.6; }

/* ── FAQ Section ──────────────────────────────────── */
.faq-section {
  padding:72px 0 80px;
  background:var(--bg);
  border-top:1px solid var(--border);
}
.faq-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:20px; margin-top:48px;
}
.faq-item {
  background:var(--white); border:1.5px solid var(--border);
  border-radius:var(--radius); padding:24px;
  transition:box-shadow var(--transition), border-color var(--transition);
}
.faq-item:hover { box-shadow:var(--shadow); border-color:#D1D5DB; }
.faq-item h3 {
  font-size:.97rem; font-weight:800; color:var(--dark);
  margin-bottom:10px; display:flex; align-items:flex-start; gap:10px;
}
.faq-item h3::before {
  content:'Q'; display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:6px;
  background:var(--red); color:#fff;
  font-size:.72rem; font-weight:900; letter-spacing:.03em;
  flex-shrink:0; margin-top:1px;
}
.faq-item p { font-size:.87rem; color:var(--sub); line-height:1.7; }

/* ── Footer ───────────────────────────────────────── */
.site-footer {
  background:#111827;
  border-top:1px solid rgba(255,255,255,.06);
  padding:60px 24px 0;
  color:rgba(255,255,255,.65);
}
.footer-grid {
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr;
  gap:48px; padding-bottom:48px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.footer-brand .footer-logo {
  display:inline-flex; align-items:center; gap:9px; margin-bottom:14px;
}
.footer-brand .fl-icon {
  width:34px; height:34px; border-radius:8px;
  background:linear-gradient(135deg,var(--red),#FF6B6B);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.footer-brand .fl-name {
  font-size:1.05rem; font-weight:800; color:#fff; letter-spacing:-.02em;
}
.footer-brand .fl-name strong { color:#FB7185; }
.footer-brand p { font-size:.84rem; line-height:1.7; max-width:280px; }

.footer-col h4 {
  font-size:.8rem; font-weight:700; color:rgba(255,255,255,.85);
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:16px;
}
.footer-col a {
  display:block; font-size:.86rem; color:rgba(255,255,255,.5);
  padding:4px 0; transition:color var(--transition);
  cursor:pointer;
}
.footer-col a:hover { color:#fff; }

.footer-bottom {
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 0; flex-wrap:wrap; gap:10px;
  font-size:.82rem; color:rgba(255,255,255,.3);
}
.footer-bottom a { color:rgba(255,255,255,.4); transition:color var(--transition); }
.footer-bottom a:hover { color:rgba(255,255,255,.8); }

/* ── Use Cases Section ────────────────────────────── */
.usecases-section {
  padding:72px 0;
  background:var(--white);
  border-top:1px solid var(--border);
}
.usecases-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:20px; margin-top:48px;
}
.usecase-card {
  display:flex; align-items:flex-start; gap:16px;
  padding:24px; border-radius:var(--radius);
  border:1.5px solid var(--border); background:var(--bg);
  transition:box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.usecase-card:hover { box-shadow:var(--shadow); border-color:#D1D5DB; transform:translateY(-3px); }
.uc-icon {
  width:50px; height:50px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.usecase-card h3 { font-size:.93rem; font-weight:800; color:var(--dark); margin-bottom:7px; line-height:1.3; }
.usecase-card p  { font-size:.83rem; color:var(--sub); line-height:1.65; }
.usecase-card p strong { color:var(--dark); }

/* ── Popular Searches Section ─────────────────────── */
.searches-section {
  padding:48px 0 56px;
  background:var(--bg);
  border-top:1px solid var(--border);
}
.searches-title {
  font-size:1.05rem; font-weight:800; color:var(--sub);
  text-align:center; letter-spacing:.03em; text-transform:uppercase;
  margin-bottom:20px; font-size:.85rem;
}
.keyword-tags {
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
}
.kw-tag {
  padding:8px 16px; border-radius:999px;
  font-size:.82rem; font-weight:600; color:var(--sub);
  border:1.5px solid var(--border); background:var(--white);
  cursor:pointer; font-family:inherit;
  transition:all var(--transition);
}
.kw-tag:hover {
  background:var(--red); color:#fff;
  border-color:var(--red);
  box-shadow:0 4px 12px rgba(229,50,45,.25);
  transform:translateY(-2px);
}

/* ── Tool Page ────────────────────────────────────── */
.pg-tool { min-height:100vh; background:#EEF0F5; }

.tool-bar {
  background:var(--white); border-bottom:1px solid var(--border);
  padding:0 28px; height:56px;
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:64px; z-index:100;
  box-shadow:0 1px 4px rgba(0,0,0,.05);
}
.tool-back {
  display:inline-flex; align-items:center; gap:8px;
  font-size:.88rem; font-weight:600; color:var(--sub);
  padding:6px 12px; border-radius:8px;
  transition:background var(--transition), color var(--transition);
}
.tool-back:hover { background:var(--bg); color:var(--text); }
.tool-bar-title { font-size:.9rem; font-weight:700; color:var(--muted); }

.t-panel { width:100%; }

/* ── Upload State ─────────────────────────────────── */
.upload-state {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:calc(100vh - 120px);
  padding:48px 24px; text-align:center;
  transition:background var(--transition);
}
.upload-state.over { background:rgba(229,50,45,.03); }
.upload-state.over .select-files-btn { transform:scale(1.03); }

.tool-title {
  font-size:2.4rem; font-weight:900; letter-spacing:-.03em;
  color:var(--dark); margin-bottom:14px; line-height:1.15;
}
.tool-sub {
  font-size:1.05rem; color:var(--sub); line-height:1.7;
  max-width:560px; margin-bottom:36px;
}
.select-files-btn {
  display:inline-flex; align-items:center; gap:10px;
  background:var(--red); color:#fff;
  font-size:1.08rem; font-weight:800;
  padding:17px 42px; border-radius:13px;
  cursor:pointer; user-select:none;
  box-shadow:0 8px 24px rgba(229,50,45,.35);
  transition:background var(--transition), transform .14s, box-shadow .14s;
  margin-bottom:16px;
}
.select-files-btn:hover { background:var(--red-h); transform:translateY(-2px); box-shadow:0 12px 30px rgba(229,50,45,.4); }
.select-files-btn:active { transform:translateY(0); }
.select-files-btn.green  { background:var(--green);  box-shadow:0 8px 24px rgba(22,163,74,.3); }
.select-files-btn.green:hover  { background:var(--green-h); }
.select-files-btn.orange { background:var(--orange); box-shadow:0 8px 24px rgba(234,88,12,.3); }
.select-files-btn.orange:hover { background:var(--orange-h); }
.drop-hint { font-size:.88rem; color:var(--muted); }

/* ── Workspace State ──────────────────────────────── */
.workspace-state { display:flex; min-height:calc(100vh - 120px); }
.ws-left { flex:1; padding:32px; position:relative; display:flex; flex-direction:column; gap:16px; }

.thumbs-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(155px,1fr));
  gap:16px; align-content:start;
}
.thumb-card {
  background:#fff; border-radius:12px;
  box-shadow:0 2px 8px rgba(0,0,0,.07);
  overflow:hidden; position:relative;
  transition:box-shadow .15s, transform .15s; cursor:default;
}
.thumb-card:hover { box-shadow:0 6px 20px rgba(0,0,0,.12); transform:translateY(-2px); }
.thumb-preview {
  width:100%; height:190px; background:#f5f6f8;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.thumb-preview img     { width:100%; height:100%; object-fit:cover; }
.thumb-preview canvas  { max-width:100%; max-height:100%; object-fit:contain; }
.thumb-loading {
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%;
}
.thumb-loading .spin { border-color:rgba(229,50,45,.2); border-top-color:var(--red); }
.pdf-fallback {
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; color:var(--muted);
}
.thumb-name {
  padding:8px 10px 10px; font-size:.75rem; font-weight:500;
  color:var(--sub); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; text-align:center;
}
.thumb-remove {
  position:absolute; top:6px; right:6px;
  width:26px; height:26px; border-radius:50%;
  background:rgba(0,0,0,.55); color:#fff;
  font-size:18px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .15s; cursor:pointer; z-index:2;
}
.thumb-card:hover .thumb-remove { opacity:1; }
.thumb-remove:hover { background:rgba(220,38,38,.9); }

/* FABs */
.ws-fabs {
  display:flex; flex-direction:column; align-items:center;
  gap:10px; position:absolute; right:32px; bottom:48px;
}
.fab-add {
  width:54px; height:54px; border-radius:50%;
  background:var(--red);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; position:relative;
  box-shadow:0 4px 16px rgba(229,50,45,.4);
  transition:background .15s, transform .15s;
}
.fab-add:hover { background:var(--red-h); transform:scale(1.07); }
.fab-add.orange { background:var(--orange); box-shadow:0 4px 16px rgba(234,88,12,.4); }
.fab-add.orange:hover { background:var(--orange-h); }
.fab-count {
  position:absolute; top:-5px; left:-5px;
  background:var(--red); color:#fff;
  font-size:11px; font-weight:800;
  min-width:20px; height:20px; padding:0 4px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  border:2px solid #EEF0F5;
}
.fab-add.orange .fab-count { background:var(--orange); }
.fab-sort {
  width:54px; height:54px; border-radius:50%;
  background:#fff; border:2px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--sub);
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  transition:border-color .15s, color .15s;
}
.fab-sort:hover { border-color:var(--text); color:var(--text); }

/* ── Sidebar ──────────────────────────────────────── */
.ws-sidebar {
  width:300px; flex-shrink:0;
  background:#fff; border-left:1px solid var(--border);
  padding:28px 24px;
  display:flex; flex-direction:column; gap:20px;
  position:sticky; top:120px;
  height:calc(100vh - 120px);
  overflow-y:auto;
}
.sidebar-title { font-size:1.25rem; font-weight:900; color:var(--dark); }
.sidebar-tip {
  background:#EFF6FF; border-radius:10px;
  padding:12px 14px; display:flex; gap:10px;
  align-items:flex-start;
  font-size:.83rem; color:#1e3a5f; line-height:1.55;
}
.sidebar-tip svg { flex-shrink:0; margin-top:1px; }
.sidebar-tip.green-tip { background:#f0fdf4; color:#14532d; }

.sidebar-field { display:flex; flex-direction:column; gap:6px; }
.field-label {
  font-size:.84rem; font-weight:700; color:var(--text);
  display:flex; align-items:center; gap:8px;
}
.field-hint { font-size:.74rem; color:var(--muted); font-weight:400; }
.field-input {
  padding:11px 14px; border:1.5px solid var(--border); border-radius:9px;
  font-size:.93rem; font-family:inherit; outline:none;
  transition:border-color .16s, box-shadow .16s;
}
.field-input:focus { border-color:var(--red); box-shadow:0 0 0 3px rgba(229,50,45,.1); }

.rotate-opts { display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.rotate-opt {
  display:flex; align-items:center; gap:10px;
  padding:11px 14px; border-radius:10px;
  border:1.5px solid var(--border); font-size:.88rem; font-weight:600;
  color:var(--text); cursor:pointer;
  transition:border-color .14s, background .14s, color .14s;
}
.rotate-opt:hover { border-color:var(--red); background:var(--red-lt); }
.rotate-opt.active { border-color:var(--red); background:var(--red-lt); color:var(--red); }

.quality-opts { display:flex; gap:8px; margin-top:4px; }
.quality-opt {
  flex:1; padding:10px 6px; border-radius:10px;
  border:1.5px solid var(--border); font-size:.82rem; font-weight:700;
  color:var(--text); cursor:pointer; text-align:center; line-height:1.4;
  transition:border-color .14s, background .14s, color .14s;
}
.quality-opt small { display:block; font-size:.7rem; font-weight:500; color:var(--muted); }
.quality-opt:hover { border-color:var(--red); background:var(--red-lt); }
.quality-opt.active { border-color:var(--red); background:var(--red-lt); color:var(--red); }
.quality-opt.active small { color:var(--red); }

.sidebar-btn {
  margin-top:auto;
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 20px; border-radius:12px;
  background:var(--red); color:#fff;
  font-size:.97rem; font-weight:800; width:100%;
  cursor:pointer;
  box-shadow:0 4px 16px rgba(229,50,45,.3);
  transition:background .15s, transform .14s, box-shadow .16s;
}
.sidebar-btn:hover:not(:disabled) { background:var(--red-h); transform:translateY(-1px); box-shadow:0 6px 20px rgba(229,50,45,.4); }
.sidebar-btn:disabled { background:#ccc; cursor:not-allowed; box-shadow:none; }
.sidebar-btn.green  { background:var(--green);  box-shadow:0 4px 16px rgba(22,163,74,.3); }
.sidebar-btn.green:hover:not(:disabled)  { background:var(--green-h); }
.sidebar-btn.orange { background:var(--orange); box-shadow:0 4px 16px rgba(234,88,12,.3); }
.sidebar-btn.orange:hover:not(:disabled) { background:var(--orange-h); }
.sidebar-btn.wm-btn { background:var(--blue); box-shadow:0 4px 16px rgba(37,99,235,.3); }
.sidebar-btn.wm-btn:hover:not(:disabled) { background:#1D4ED8; }

.result { border-radius:10px; padding:16px; text-align:center; }
.result.ok  { background:#EDFAF3; border:1px solid #A7D9B8; }
.result.err { background:#FFF0EE; border:1px solid #F5B7AD; }
.result h4  { font-size:.95rem; font-weight:800; margin-bottom:6px; }
.result p   { font-size:.82rem; color:var(--sub); margin-bottom:14px; }

.dl-btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 24px; border-radius:9px;
  background:var(--green); color:#fff;
  font-weight:800; font-size:.9rem;
  transition:background .14s, transform .12s;
}
.dl-btn:hover { background:var(--green-h); transform:translateY(-1px); }

/* Watermark controls */
.color-row { display:flex; align-items:center; gap:12px; }
.color-picker {
  width:44px; height:44px; border-radius:8px;
  border:1.5px solid var(--border); padding:2px;
  cursor:pointer; background:none; flex-shrink:0;
}
.color-presets { display:flex; gap:8px; flex-wrap:wrap; }
.color-preset {
  width:26px; height:26px; border-radius:50%;
  border:2px solid rgba(0,0,0,.12); cursor:pointer;
  transition:transform .12s, border-color .12s;
}
.color-preset:hover { transform:scale(1.2); border-color:rgba(0,0,0,.3); }
.field-range {
  width:100%; height:6px; border-radius:4px;
  appearance:none; -webkit-appearance:none;
  background:var(--border); outline:none; cursor:pointer;
}
.field-range::-webkit-slider-thumb {
  -webkit-appearance:none; width:18px; height:18px; border-radius:50%;
  background:var(--red); cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.2);
}
.field-range::-moz-range-thumb {
  width:18px; height:18px; border-radius:50%;
  background:var(--red); cursor:pointer; border:none;
}
.size-opts { display:flex; gap:8px; }
.size-opt {
  flex:1; padding:9px 6px; border-radius:9px;
  border:1.5px solid var(--border); font-size:.85rem; font-weight:600;
  color:var(--text); cursor:pointer; text-align:center;
  transition:border-color .14s, background .14s, color .14s;
}
.size-opt:hover { border-color:var(--red); background:var(--red-lt); }
.size-opt.active { border-color:var(--red); background:var(--red-lt); color:var(--red); }

/* Spinner */
.spin {
  display:inline-block; width:17px; height:17px;
  border:2.5px solid rgba(255,255,255,.35);
  border-top-color:#fff; border-radius:50%;
  animation:spin .65s linear infinite;
  vertical-align:middle; margin-right:8px;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ── Responsive ───────────────────────────────────── */
@media (max-width:1100px) {
  .tool-grid { grid-template-columns:repeat(3,1fr); }
  .features-grid { grid-template-columns:repeat(2,1fr); }
  .usecases-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width:900px) {
  .site-nav { display:none; }
  .menu-toggle { display:flex; }
  .hero-inner { grid-template-columns:1fr; gap:40px; }
  .hero-visual { display:none; }
  .hero-h1 { font-size:2.4rem; }
  .steps { grid-template-columns:1fr; }
  .step-arrow { transform:rotate(90deg); justify-self:center; }
  .faq-grid { grid-template-columns:1fr; }
  .tool-grid { grid-template-columns:repeat(3,1fr); }
  .usecases-grid { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .tool-grid { grid-template-columns:repeat(2,1fr); }
  .features-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; gap:24px; }
  .footer-bottom { flex-direction:column; text-align:center; }
  .hero-h1 { font-size:2rem; }
  .hero-actions { flex-direction:column; }
  .btn-primary-xl, .btn-ghost-xl { width:100%; justify-content:center; }
  .workspace-state { flex-direction:column; }
  .ws-sidebar { width:100%; border-left:none; border-top:1px solid var(--border); height:auto; position:static; }
  .tool-bar { top:56px; }
}