:root{
  --paper:#F8F9FC; --paper-line: rgba(15,42,80,0.09);
  --blueprint:#0A2F5C; --blueprint-deep:#071F3D; --blueprint-light:#2E6DA4;
  --ink:#111827; --ink-soft:#59677A;
  --amber:#F2A73B; --amber-deep:#D98A1F;
  --green:#1FA575; --violet:#6C5CE7; --violet-deep:#5849C4;
  --coral:#FF7A59; --coral-deep:#E85F3B;
  --card-bg:#FFFFFF; --radius:16px; --max-w:1180px;
  --shadow-soft: 0 2px 6px rgba(10,47,92,0.06);
  --shadow-lift: 0 16px 32px -8px rgba(10,47,92,0.16);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;} }
body{
  margin:0; font-family:'IBM Plex Sans', sans-serif; color:var(--ink);
  background:linear-gradient(var(--paper-line) 1px, transparent 1px),linear-gradient(90deg, var(--paper-line) 1px, transparent 1px),var(--paper);
  background-size: 32px 32px, 32px 32px, auto;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4{ font-family:'Space Grotesk', sans-serif; margin:0; color:var(--blueprint); }
.mono{ font-family:'IBM Plex Mono', monospace; }
a{ color:inherit; }
:focus-visible{ outline:3px solid var(--amber); outline-offset:2px; }
img, svg{ max-width:100%; }
.wrap{ max-width:var(--max-w); margin:0 auto; padding:0 20px; }
@media (max-width:480px){ .wrap{ padding:0 16px; } }

/* ---------- HEADER ---------- */
header{ position:sticky; top:0; z-index:50; background:rgba(252,252,249,0.94); backdrop-filter:blur(4px); border-bottom:1px solid var(--paper-line); }
.nav{ position:relative; display:flex; align-items:center; justify-content:space-between; padding:14px 20px; max-width:var(--max-w); margin:0 auto; }
.logo{ display:flex; align-items:center; gap:10px; font-family:'Space Grotesk'; font-weight:700; font-size:1.2rem; color:var(--blueprint); cursor:pointer; text-decoration:none; }
.logo-mark{ width:32px; height:32px; flex-shrink:0; border:2px solid var(--blueprint); border-radius:6px; display:flex; align-items:center; justify-content:center; background:repeating-linear-gradient(45deg, var(--blueprint) 0 2px, transparent 2px 6px); }
.logo-mark span{ background:var(--paper); width:20px; height:20px; border-radius:3px; display:block; }
.nav-links{ display:flex; gap:22px; font-size:0.92rem; font-weight:500; }
.nav-links a{ text-decoration:none; color:var(--ink-soft); padding:6px 0; cursor:pointer; }
.nav-links a:hover{ color:var(--blueprint); }
.nav-toggle{ display:none; align-items:center; justify-content:center; width:40px; height:40px; border-radius:8px; border:1px solid var(--paper-line); background:#fff; color:var(--blueprint); cursor:pointer; }
.nav-toggle svg{ width:20px; height:20px; }
@media (max-width:680px){
  .logo{ font-size:1.05rem; } .nav-toggle{ display:flex; }
  .nav-links{ display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0; background:#fff; border-bottom:1px solid var(--paper-line); box-shadow:var(--shadow-lift); }
  .nav-links.open{ display:flex; } .nav-links a{ padding:15px 20px; border-top:1px solid var(--paper-line); width:100%; }
}

/* ---------- HERO ---------- */
.hero{ padding:56px 0 36px; position:relative; overflow:hidden; }
.hero::before{ content:""; position:absolute; inset:-20% -10% auto -10%; height:640px; z-index:-1;
  background:radial-gradient(480px 340px at 12% 20%, rgba(46,109,164,0.16), transparent 70%),radial-gradient(420px 320px at 82% 8%, rgba(108,92,231,0.13), transparent 70%),radial-gradient(380px 300px at 60% 60%, rgba(242,167,59,0.12), transparent 70%);
  filter:blur(6px); pointer-events:none; }
.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:'IBM Plex Mono'; font-size:0.74rem; font-weight:600; letter-spacing:0.06em; color:var(--blueprint-light); text-transform:uppercase; border:1px dashed var(--blueprint-light); border-radius:999px; padding:5px 14px; margin-bottom:18px; max-width:100%; }
.eyebrow::before{ content:"\25CF"; color:var(--green); font-size:0.6rem; flex-shrink:0; }
.hero h1{ font-size:clamp(1.9rem, 6vw, 3.2rem); line-height:1.14; font-weight:700; color:var(--ink); text-align:center; max-width:820px; margin:0 auto; }
.hero h1 .accent{ background:linear-gradient(100deg, var(--blueprint) 0%, var(--violet) 55%, var(--coral) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--blueprint); }
.hero p.lede{ margin:16px auto 0; font-size:1.02rem; color:var(--ink-soft); max-width:56ch; line-height:1.65; text-align:center; }
.hero-center{ display:flex; flex-direction:column; align-items:center; }
.badge-row{ display:flex; gap:10px; margin-top:24px; flex-wrap:wrap; justify-content:center; }
.badge{ font-family:'IBM Plex Mono'; font-size:0.72rem; font-weight:600; background:#fff; border:1px solid var(--paper-line); border-radius:9px; padding:8px 11px; display:flex; align-items:center; gap:6px; color:var(--ink-soft); box-shadow:var(--shadow-soft); }
.badge b{ color:var(--green); }

/* ---------- stamp / watermark badge ---------- */
.stamp-zone{ position:relative; display:flex; justify-content:center; align-items:center; margin-top:30px; }
.stamp-zone::before{ content:""; position:absolute; width:230px; height:230px; border-radius:50%; background:radial-gradient(circle, rgba(108,92,231,0.10) 0%, transparent 70%); }
.stamp{
  width:170px; height:170px; border-radius:50%;
  background:conic-gradient(from 200deg, var(--blueprint), var(--violet), var(--coral), var(--blueprint));
  display:flex; align-items:center; justify-content:center; text-align:center;
  transform:rotate(-9deg); position:relative;
  animation: stamp-in .6s cubic-bezier(.2,.8,.3,1);
  box-shadow:0 16px 32px -10px rgba(10,47,92,0.35);
  padding:5px;
}
@keyframes stamp-in{ from{ transform:rotate(-9deg) scale(0.7); opacity:0;} to{ transform:rotate(-9deg) scale(1); opacity:1;} }
@media (prefers-reduced-motion: reduce){ .stamp{ animation:none; } }
.stamp-inner{ width:100%; height:100%; border-radius:50%; background:var(--paper); display:flex; align-items:center; justify-content:center; text-align:center; color:var(--blueprint); font-family:'Space Grotesk'; font-weight:700; }
.stamp-text{ font-size:0.9rem; line-height:1.3; letter-spacing:0.02em; }
.stamp-text .small{ display:block; font-size:0.56rem; font-family:'IBM Plex Mono'; letter-spacing:0.13em; margin-top:5px; color:var(--green); }
@media (max-width:480px){ .stamp{ width:140px; height:140px; } .stamp-text{ font-size:0.78rem; } }

/* ---------- category + tool cards on home ---------- */
.tools-home{ padding:20px 0 70px; }
.category-block{ margin-bottom:44px; }
.category-heading{ display:flex; align-items:baseline; gap:12px; margin-bottom:20px; }
.category-heading h2{ font-size:1.3rem; }
.category-heading .count{ font-family:'IBM Plex Mono'; font-size:0.75rem; color:var(--ink-soft); background:#fff; border:1px solid var(--paper-line); border-radius:999px; padding:3px 10px; }
.home-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:18px; }
.home-card{ background:var(--card-bg); border:1px solid var(--paper-line); border-radius:14px; padding:20px 18px; text-decoration:none; display:block; box-shadow:var(--shadow-soft); transition:box-shadow .2s ease, transform .2s ease; position:relative; overflow:hidden; cursor:pointer; }
.home-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--card-accent, var(--blueprint-light)); }
.home-card:hover{ box-shadow:var(--shadow-lift); transform:translateY(-3px); }
.home-card .h-icon{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--card-accent-soft, rgba(46,109,164,0.1)); margin-bottom:12px; }
.home-card .h-icon svg{ width:19px; height:19px; color:var(--card-accent, var(--blueprint-light)); }
.home-card h3{ font-size:1.02rem; margin-bottom:4px; }
.home-card p{ font-size:0.82rem; color:var(--ink-soft); line-height:1.5; margin:0; }
.home-card .h-arrow{ margin-top:12px; font-family:'IBM Plex Mono'; font-size:0.74rem; font-weight:600; color:var(--card-accent, var(--blueprint-light)); }
@media (max-width:640px){
  .home-grid{ grid-template-columns:repeat(2, 1fr); gap:10px; }
  .home-card{ padding:14px 10px; border-radius:12px; text-align:center; }
  .home-card .h-icon{ width:32px; height:32px; margin:0 auto 8px; border-radius:9px; }
  .home-card .h-icon svg{ width:16px; height:16px; }
  .home-card h3{ font-size:0.82rem; margin-bottom:0; line-height:1.3; }
  .home-card p{ display:none; }
  .home-card .h-arrow{ display:none; }
}
@media (max-width:360px){
  .home-grid{ gap:8px; }
  .home-card{ padding:12px 8px; }
  .home-card h3{ font-size:0.76rem; }
}

.accent-blue{ --card-accent:#2E6DA4; --card-accent-soft:rgba(46,109,164,0.1); }
.accent-violet{ --card-accent:#6C5CE7; --card-accent-soft:rgba(108,92,231,0.1); }
.accent-coral{ --card-accent:#E85F3B; --card-accent-soft:rgba(255,122,89,0.12); }
.accent-green{ --card-accent:#1FA575; --card-accent-soft:rgba(31,165,117,0.1); }

/* ---------- individual tool page ---------- */
.tool-page{ padding:32px 0 70px; }
.back-link{ display:inline-flex; align-items:center; gap:6px; font-size:0.85rem; font-weight:600; color:var(--blueprint-light); text-decoration:none; margin-bottom:22px; cursor:pointer; }
.back-link:hover{ text-decoration:underline; }
.tool-header{ display:flex; align-items:center; gap:16px; margin-bottom:28px; flex-wrap:wrap; }
.tool-header .t-icon{ width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:var(--card-accent-soft, rgba(46,109,164,0.1)); flex-shrink:0; }
.tool-header .t-icon svg{ width:27px; height:27px; color:var(--card-accent, var(--blueprint-light)); }
.tool-header h1{ font-size:clamp(1.5rem,4vw,2.1rem); text-align:left; }
.tool-header .tag{ font-family:'IBM Plex Mono'; font-size:0.78rem; color:var(--card-accent, var(--blueprint-light)); font-weight:600; }

.tool-layout{ display:flex; flex-direction:column; gap:32px; }

.tool-widget{ background:#fff; border:1px solid var(--paper-line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow-soft); }

.dropzone{ border:1.5px dashed color-mix(in srgb, var(--card-accent, var(--blueprint-light)) 55%, var(--paper-line)); border-radius:11px; padding:26px 14px; text-align:center; cursor:pointer; transition: background .15s ease, border-color .15s ease; background:var(--card-accent-soft, rgba(46,109,164,0.05)); }
.dropzone.dragover{ background:color-mix(in srgb, var(--card-accent, var(--blueprint-light)) 16%, white); border-color:var(--card-accent, var(--amber)); }
.dropzone svg{ width:26px; height:26px; color:var(--card-accent, var(--blueprint-light)); margin-bottom:8px; }
.dropzone .dz-label{ font-size:0.88rem; font-weight:500; color:var(--ink); }
.dropzone .dz-sub{ font-size:0.72rem; color:var(--ink-soft); margin-top:4px; font-family:'IBM Plex Mono'; }
.dropzone input[type=file]{ display:none; }

.file-chip{ margin-top:12px; font-family:'IBM Plex Mono'; font-size:0.76rem; background:#F3F6F9; border-radius:7px; padding:8px 10px; display:flex; align-items:center; justify-content:space-between; gap:8px; word-break:break-all; }
.file-chip button{ background:none; border:none; color:var(--ink-soft); cursor:pointer; font-size:1rem; line-height:1; padding:4px; }

.convert-btn{ width:100%; margin-top:16px; padding:14px; border-radius:9px; background:var(--card-accent, var(--blueprint)); color:#fff; font-weight:600; border:none; cursor:pointer; font-family:'IBM Plex Sans'; font-size:0.95rem; box-shadow:0 8px 18px -6px color-mix(in srgb, var(--card-accent, var(--blueprint)) 70%, transparent); transition: transform .15s ease, box-shadow .15s ease; }
.convert-btn:disabled{ opacity:0.4; cursor:not-allowed; box-shadow:none; }
.convert-btn:not(:disabled):hover{ transform:translateY(-1px); }

.status{ margin-top:12px; font-size:0.8rem; font-family:'IBM Plex Mono'; color:var(--ink-soft); min-height:1.2em; word-break:break-word; }
.status.ok{ color:var(--green); } .status.err{ color:#B5432B; }
.progress-track{ height:6px; border-radius:4px; background:var(--paper-line); margin-top:10px; overflow:hidden; display:none; }
.progress-fill{ height:100%; width:0%; background:var(--blueprint-light); transition:width .2s ease; }
.download-link{ display:none; margin-top:14px; text-align:center; background:var(--green); color:#fff; padding:13px; border-radius:9px; text-decoration:none; font-weight:600; font-size:0.92rem; box-shadow:0 8px 18px -6px rgba(31,165,117,0.45); }

.text-input{ width:100%; min-height:150px; border:1px solid var(--paper-line); border-radius:10px; padding:14px; font-family:'IBM Plex Mono'; font-size:0.85rem; resize:vertical; background:#F8F9FC; }
.text-input:focus{ outline:2px solid var(--blueprint-light); }
.or-divider{ text-align:center; font-family:'IBM Plex Mono'; font-size:0.72rem; color:var(--ink-soft); margin:14px 0; text-transform:uppercase; letter-spacing:0.06em; }
.field-label{ font-size:0.8rem; font-weight:600; color:var(--ink-soft); margin:14px 0 6px; display:block; }
.lang-select{ width:100%; padding:11px; border-radius:9px; border:1px solid var(--paper-line); font-family:'IBM Plex Sans'; font-size:0.88rem; background:#fff; }
.lang-row{ display:grid; grid-template-columns:1fr auto 1fr; gap:8px; align-items:center; margin-top:6px; }
.lang-row .arrow{ color:var(--ink-soft); }

.result-box{ display:none; margin-top:16px; background:#F3F6F9; border-radius:10px; padding:14px; font-size:0.86rem; line-height:1.5; }
.ocr-preview{ white-space:pre-wrap; font-family:'IBM Plex Mono'; font-size:0.76rem; margin:8px 0 0; max-height:240px; overflow-y:auto; }
.copy-btn{ margin-top:8px; background:var(--blueprint); color:#fff; border:none; border-radius:7px; padding:6px 12px; font-size:0.76rem; font-weight:600; cursor:pointer; }
#qr-preview-holder{ display:none; justify-content:center; padding:16px; background:#fff; border-radius:10px; margin-top:14px; }

.article-content{ font-size:0.98rem; line-height:1.75; color:var(--ink); }
.article-content p{ margin:0 0 18px; }
.article-content h2{ font-size:1.2rem; margin:0 0 14px; }

.faq{ padding:10px 0 70px; }
.faq-list{ max-width:760px; margin:0 auto; }
.faq-item{ border-bottom:1px solid var(--paper-line); }
.faq-item summary{ cursor:pointer; list-style:none; padding:18px 4px; display:flex; align-items:center; justify-content:space-between; gap:12px; font-family:'Space Grotesk'; font-weight:600; font-size:0.98rem; color:var(--ink); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; color:var(--blueprint-light); font-size:1.3rem; font-weight:400; flex-shrink:0; }
.faq-item[open] summary::after{ content:"\2013"; }
.faq-item p{ margin:0 0 18px; color:var(--ink-soft); font-size:0.9rem; line-height:1.6; padding-right:8px; }
.section-head{ text-align:center; max-width:640px; margin:0 auto 32px; }
.section-head h2{ font-size:clamp(1.4rem,4vw,1.9rem); }
.section-head p{ color:var(--ink-soft); margin-top:12px; line-height:1.6; font-size:0.95rem; }

/* ---------- simple content pages (about / privacy) ---------- */
.content-page{ padding:40px 0 70px; }
.content-page .wrap{ max-width:760px; }
.content-page h1{ font-size:clamp(1.6rem,4vw,2.3rem); margin-bottom:18px; }
.content-page h2{ font-size:1.15rem; margin:30px 0 12px; }
.content-page p{ font-size:0.96rem; line-height:1.75; color:var(--ink); margin:0 0 16px; }
.content-page ul{ margin:0 0 16px; padding-left:22px; color:var(--ink); font-size:0.96rem; line-height:1.75; }
.content-page a.inline-link{ color:var(--blueprint-light); font-weight:600; }

footer{ border-top:1px solid var(--paper-line); padding:24px 0; }
.footer-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; font-size:0.8rem; color:var(--ink-soft); text-align:center; }
.footer-row .mono{ color:var(--blueprint-light); font-size:0.72rem; }
.footer-links{ display:flex; gap:16px; }
.footer-links a{ text-decoration:none; color:var(--ink-soft); }
.footer-links a:hover{ color:var(--blueprint); }
@media (max-width:480px){ .footer-row{ justify-content:center; flex-direction:column; } }