@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --brand:#4f46e5;--brand-dark:#4338ca;--brand-light:#ede9fe;
  --text:#111827;--muted:#6b7280;--border:#e5e7eb;
  --bg:#eef0f8;--white:#fff;--success:#16a34a;
  --r:16px;--r-sm:10px;
}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);min-height:100vh}

/* BG */
.page-bg{position:relative;min-height:100vh;overflow-x:hidden}
.blob{position:fixed;border-radius:50%;opacity:.16;pointer-events:none;z-index:0}
.blob1{width:400px;height:400px;background:#a5b4fc;top:-100px;left:-100px}
.blob2{width:300px;height:300px;background:#93c5fd;bottom:0;right:-80px}
.blob3{width:200px;height:200px;background:#c4b5fd;top:40%;right:100px}

/* NAV */
.nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);border-bottom:1px solid rgba(0,0,0,.07);padding:0 32px;height:62px;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:800;color:#1e1b4b;text-decoration:none;letter-spacing:-.5px}
.logo-icon{width:38px;height:38px;background:var(--brand);border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.logo-icon svg{width:20px;height:20px;fill:white}
.nav-badge{font-size:12px;font-weight:600;color:var(--muted);background:#f3f4f6;padding:5px 13px;border-radius:20px}

/* ── HOME: HERO ── */
.hero{position:relative;z-index:1;text-align:center;padding:48px 32px 8px}
.hero-chip{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.8);border:1px solid rgba(79,70,229,.2);color:var(--brand);font-size:12.5px;font-weight:700;padding:6px 16px;border-radius:20px;margin-bottom:18px}
.hero-dot{width:7px;height:7px;border-radius:50%;background:var(--brand);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
.hero h1{font-size:34px;font-weight:800;letter-spacing:-.8px;line-height:1.2;margin-bottom:10px;color:#1e1b4b}
.hero h1 em{color:var(--brand);font-style:normal}
.hero p{font-size:15px;color:var(--muted);line-height:1.6;max-width:460px;margin:0 auto}

/* TABS */
.tabs-wrap{position:relative;z-index:1;padding:24px 32px 0;display:flex;justify-content:center}
.tabs{display:flex;gap:6px;background:rgba(255,255,255,.8);padding:6px;border-radius:30px;border:1px solid rgba(0,0,0,.08);backdrop-filter:blur(8px)}
.tab{padding:8px 22px;border-radius:20px;font-size:13.5px;font-weight:700;cursor:pointer;color:var(--muted);border:none;background:transparent;transition:all .18s;white-space:nowrap;font-family:'Inter',sans-serif;letter-spacing:-.1px;text-decoration:none;display:inline-block}
.tab:hover{color:#1a1a2e;background:rgba(0,0,0,.05)}
.tab.active{background:#1a1a2e;color:#fff;font-weight:800}

/* GRID */
.grid-wrap{position:relative;z-index:1;padding:22px 150px 48px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}

/* CARD */
.card{background:var(--white);border-radius:var(--r);border:1px solid rgba(0,0,0,.07);padding:28px 24px 26px;cursor:pointer;transition:all .2s;position:relative;overflow:hidden;text-decoration:none;display:block;color:var(--text)}
.card:hover{box-shadow:0 10px 36px rgba(0,0,0,.11);transform:translateY(-3px);border-color:rgba(0,0,0,.1)}
.card-badge{position:absolute;top:14px;right:14px;background:#dbeafe;color:#1d4ed8;font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px}
.card-badge.new{background:#dcfce7;color:#15803d}
.card-icon{width:56px;height:56px;border-radius:12px;margin-bottom:18px}
.card-icon svg{width:56px;height:56px}
.card-title{font-size:17px;font-weight:700;margin-bottom:8px;line-height:1.25}
.card-desc{font-size:13px;color:var(--muted);line-height:1.6}
.card-desc strong{color:#374151}

/* FOOTER */
.footer{position:relative;z-index:1;background:rgba(255,255,255,.7);border-top:1px solid rgba(0,0,0,.07);padding:18px 32px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;backdrop-filter:blur(8px)}
.feat{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--muted)}
.feat svg{width:15px;height:15px;stroke:var(--brand);fill:none;stroke-width:2;flex-shrink:0}

/* ── TOOL PAGE ── */
.tool-topbar{position:sticky;top:62px;z-index:90;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);padding:12px 28px;display:flex;align-items:center;gap:12px}
.back-btn{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--muted);text-decoration:none;border:1px solid var(--border);background:var(--white);padding:7px 14px;border-radius:8px;transition:all .15s;font-family:'Inter',sans-serif}
.back-btn:hover{border-color:#1a1a2e;color:#1a1a2e}
.back-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5}
.tool-topbar-icon{width:34px;height:34px;border-radius:0px;overflow:hidden;flex-shrink:0}
.tool-topbar-icon svg{width:34px;height:34px}
.tool-topbar-info h2{font-size:15px;font-weight:800;color:var(--text)}
.tool-topbar-info p{font-size:12px;color:var(--muted)}

.tool-body{display:grid;grid-template-columns:1fr 280px;min-height:calc(100vh - 130px)}
.tool-left{padding:24px;background:#f9fafb;display:flex;flex-direction:column;gap:14px}
.tool-right{background:var(--white);border-left:1px solid #f0f0f0;padding:22px;display:flex;flex-direction:column;gap:12px;overflow-y:auto}

/* DROPZONE */
.dz{border:2px dashed var(--border);border-radius:var(--r);padding:52px 24px;text-align:center;cursor:pointer;transition:all .2s;background:var(--white)}
.dz:hover,.dz.drag{border-color:var(--brand);background:var(--brand-light)}
.dz-icon{width:54px;height:54px;border-radius:14px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center}
.dz-t{font-size:15px;font-weight:700;margin-bottom:4px;color:var(--text)}
.dz-s{font-size:12.5px;color:#9ca3af;margin-bottom:16px}
.dz-btn{color:#fff;border:none;padding:10px 24px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;transition:opacity .15s}
.dz-btn:hover{opacity:.88}
.dz-fmts{margin-top:12px;display:flex;gap:5px;justify-content:center;flex-wrap:wrap}
.dz-fmt{padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600;background:#f3f4f6;color:#9ca3af;border:1px solid var(--border)}

/* PREVIEW */
.prev-box{background:#e8e5f5;border-radius:var(--r);overflow:hidden;min-height:220px;display:flex;align-items:center;justify-content:center;position:relative}
.prev-box canvas{max-width:100%;max-height:320px;display:block}
.prev-lbl{position:absolute;top:10px;left:10px;background:rgba(0,0,0,.45);color:#fff;font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px}

/* STATS */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stat{background:var(--white);border:1px solid #f0f0f0;border-radius:var(--r-sm);padding:10px 12px}
.stat-l{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#9ca3af;margin-bottom:3px}
.stat-v{font-size:15px;font-weight:700;color:var(--text)}
.stat-v.g{color:var(--success)}
.stat-v.b{color:var(--brand)}

/* SETTINGS */
.sec-l{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#9ca3af;margin-bottom:8px}
.field{margin-bottom:11px}
.fhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}
.fhead label{font-size:13px;font-weight:600;color:#374151}
.fval{font-size:11px;font-weight:700;background:var(--brand-light);color:var(--brand);padding:2px 7px;border-radius:5px}
.field input[type=range]{width:100%;accent-color:var(--brand);cursor:pointer}
.field select,.field input[type=number],.field input[type=text]{width:100%;padding:8px 11px;border:1px solid var(--border);border-radius:8px;font-size:13px;font-family:'Inter',sans-serif;background:#f9fafb;color:var(--text);outline:none;transition:border-color .15s}
.field input[type=color]{width:100%;height:38px;padding:2px 4px;border:1px solid var(--border);border-radius:8px;cursor:pointer}
.field select:focus,.field input:focus{border-color:var(--brand)}
.lock-btn{width:100%;padding:8px;border:1px solid var(--border);border-radius:8px;background:var(--white);font-size:12px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;color:var(--muted);transition:all .15s;margin-bottom:10px}
.lock-btn.on{border-color:var(--brand);color:var(--brand);background:var(--brand-light)}
.duo{display:grid;grid-template-columns:1fr 16px 1fr;align-items:end;gap:5px;margin-bottom:8px}
.duo input{padding:8px 7px;border:1px solid var(--border);border-radius:8px;font-size:13px;font-weight:600;text-align:center;background:#f9fafb;color:var(--text);outline:none;font-family:'Inter',sans-serif;transition:border-color .15s}
.duo input:focus{border-color:var(--brand)}
.xsep{text-align:center;font-size:14px;color:#9ca3af;padding-bottom:9px}
.crop-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px}

/* BUTTONS */
.proc-btn{width:100%;padding:12px;background:#1a1a2e;color:#fff;border:none;border-radius:var(--r-sm);font-size:14px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;transition:background .15s;display:flex;align-items:center;justify-content:center;gap:8px}
.proc-btn:hover{background:#111}
.proc-btn:disabled{opacity:.38;cursor:not-allowed}
.proc-btn svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.dl-btn{width:100%;padding:11px;background:var(--success);color:#fff;border:none;border-radius:var(--r-sm);font-size:13.5px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;transition:background .15s;display:flex;align-items:center;justify-content:center;gap:7px}
.dl-btn:hover{background:#15803d}
.dl-btn:disabled{opacity:.38;cursor:not-allowed}
.dl-btn svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.rot-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.rot-btn{padding:10px;background:#1a1a2e;color:#fff;border:none;border-radius:8px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;transition:background .15s}
.rot-btn:hover{background:#111}
.rot-btn.gray{background:#64748b}
.rot-btn.gray:hover{background:#475569}
.use-diff{width:100%;padding:9px;background:transparent;border:1px solid var(--border);border-radius:var(--r-sm);font-size:13px;font-weight:700;cursor:pointer;color:var(--muted);font-family:'Inter',sans-serif;transition:all .15s}
.use-diff:hover{border-color:#1a1a2e;color:#1a1a2e}
.hr{height:1px;background:#f0f0f0;margin:4px 0}
.ai-box{padding:16px;background:#f5f3ff;border-radius:var(--r-sm);border:1px solid #ddd6fe;font-size:13px;color:#5b21b6;line-height:1.7}
.info-box{padding:12px;background:#f9fafb;border-radius:8px;font-size:12.5px;color:var(--muted);line-height:1.65}

/* SEO text block on tool pages */
.seo-block{position:relative;z-index:1;padding:0 32px 40px;max-width:860px}
.seo-block h2{font-size:20px;font-weight:700;margin-bottom:10px;color:var(--text)}
.seo-block p{font-size:14px;color:var(--muted);line-height:1.8;margin-bottom:10px}

/* RELATED TOOLS */
.related{position:relative;z-index:1;padding:0 32px 48px}
.related h3{font-size:15px;font-weight:700;margin-bottom:14px;color:var(--text)}
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.related-card{background:var(--white);border:1px solid rgba(0,0,0,.07);border-radius:12px;padding:14px 16px;text-decoration:none;display:flex;align-items:center;gap:10px;transition:all .18s;color:var(--text)}
.related-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.09);transform:translateY(-2px)}
.related-card-icon{width:36px;height:36px;border-radius:9px;flex-shrink:0}
.related-card-icon svg{width:36px;height:36px}
.related-card-name{font-size:13px;font-weight:700;line-height:1.3}

/* RESPONSIVE */
@media(max-width:680px){
  .nav,.hero,.tabs-wrap,.grid-wrap,.footer,.seo-block,.related{padding-left:16px;padding-right:16px}
  .hero h1{font-size:24px}
  .tabs-wrap{overflow-x:auto}
  .tabs{width:max-content}
  .grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
  .card{padding:18px 14px}
  .tool-body{grid-template-columns:1fr}
  .tool-right{border-left:none;border-top:1px solid #f0f0f0}
  .related-grid{grid-template-columns:1fr 1fr}
}