:root { --bg:#0b1020; --fg:#eef2ff; --muted:#94a3b8; --card:#0f172a; --accent:#22d3ee;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto}
a{color:inherit}
.container{max-width:1100px;margin:0 auto;padding:24px}
.header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:48px}
@media (max-width:640px){ .brand img{height:40px} }
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:16px}
.card{background:var(--card);border:1px solid #1e293b;border-radius:16px;padding:18px;text-decoration:none;color:var(--fg);transition:transform .15s, border-color .15s}
.card:hover{transform:translateY(-2px);border-color:var(--accent)}
.badge{background:#0ea5b1;color:#001018;display:inline-block;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:700}
.footer{color:var(--muted);margin-top:40px;font-size:14px}
.drop{border:2px dashed #334155;border-radius:16px;padding:24px;text-align:center;background:#0b1228}
.progress{height:10px;background:#0f243d;border-radius:999px;overflow:hidden;margin-top:12px;box-shadow: inset 0 0 0 1px #153052}
.bar{height:10px;background:linear-gradient(90deg,#22d3ee,#818cf8);width:0%}
.hint{color:#a3b7d0;font-size:13px}
.btn{background:#1e293b;border:1px solid #334155;padding:10px 14px;border-radius:12px;cursor:pointer}
.input{background:#0f172a;border:1px solid #334155;border-radius:10px;color:var(--fg);padding:10px 12px;width:100%}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.small{font-size:12px;color:#9bb2cc}
.thumb{border:1px solid #1f2a3b;border-radius:10px;overflow:hidden;background:#0f172a}
.dragghost{opacity:.6}
label.inline{display:flex;align-items:center;gap:8px}
select, input[type=number]{background:#0f172a;border:1px solid #334155;border-radius:8px;color:var(--fg);padding:6px 8px}


/* === PDFnara Homepage Patch: tokens, hero, tabs, grid, accessibility === */
:root{
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-6:1.5rem; --space-8:2rem; --space-12:3rem;
  --radius-2:.5rem; --radius-3:.75rem; --radius-4:1rem;
  --fs-1:.875rem; --fs-2:1rem; --fs-3:1.125rem; --fs-4:1.25rem; --fs-6:1.75rem; --fs-8:2.5rem;
}
.skip{ position:absolute; left:-9999px; top:auto;}
.skip:focus{ left:1rem; top:1rem; background:#0f172a; padding:.5rem .75rem; border-radius:.5rem; z-index:100; }
:where(a,button,input,select,textarea):focus-visible{ outline:2px solid #93c5fd; outline-offset:2px; }

.site-header{ display:flex; align-items:center; justify-content:space-between; padding: var(--space-4); max-width:1200px; margin:0 auto;}
.logo{ font-weight:700; text-decoration:none; color:var(--fg); font-size:1.125rem;}
.topnav{ display:flex; gap: var(--space-4); align-items:center; }
.topnav a{ color:var(--fg); text-decoration:none; opacity:.9;}
.langswitch a[aria-current="true"]{ font-weight:600; text-decoration:underline; text-underline-offset:4px; }

.hero{ padding: var(--space-12) var(--space-4); text-align:center; max-width:1100px; margin:0 auto; }
.hero h1{ font-size: var(--fs-8); line-height:1.1; margin-bottom: var(--space-4); }
.lead{ font-size: var(--fs-4); color: var(--muted); margin-bottom: var(--space-6); }
.hero-search{ display:flex; gap: var(--space-2); justify-content:center; margin-bottom: var(--space-6); }
.hero-search input{ width:min(680px, 90vw); padding:.85rem 1rem; border-radius: var(--radius-3); border:1px solid #334155; background:#0f172a; color:var(--fg); }
.hero-cta{ display:flex; gap: var(--space-2); justify-content:center; margin-bottom: var(--space-6); flex-wrap:wrap;}
.trust-badges{ display:flex; gap: var(--space-4); justify-content:center; color:var(--muted); font-size: var(--fs-2); flex-wrap:wrap; }

.section{ max-width:1200px; margin:0 auto; padding: 0 var(--space-4) var(--space-8); }
.section h2{ font-size: var(--fs-6); margin: 0 0 var(--space-4); }

.tabs{ display:flex; gap:.5rem; flex-wrap:wrap; margin: var(--space-6) 0 var(--space-4); }
.tab{ padding:.6rem .9rem; border:1px solid #334155; border-radius: var(--radius-2); background:#0b1020; color:var(--fg); cursor:pointer; }
.tab.is-active{ background:#0f172a; border-color:#475569; }

.grid{ display:grid; gap: var(--space-4); grid-template-columns: repeat(12, 1fr); }
.toolcard{
  grid-column: span 12;
  display:flex; gap: var(--space-4); align-items:flex-start;
  border:1px solid #334155; border-radius: var(--radius-4);
  padding: var(--space-4); background:#0b1020; text-decoration:none; color:var(--fg);
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.toolcard:hover{ transform: translateY(-2px); border-color:#64748b; background:#0f172a;}
.toolcard__icon{ font-size:2rem; line-height:1; flex:0 0 auto; }
.toolcard__body{ display:grid; gap:.25rem; }
.toolcard__title{ font-size: var(--fs-3); margin:0; }
.toolcard__desc{ color: var(--muted); font-size: var(--fs-2); margin:0; }

@media (min-width:640px){ .toolcard{ grid-column: span 6; } }
@media (min-width:960px){ .toolcard{ grid-column: span 4; } }
@media (min-width:1280px){ .toolcard{ grid-column: span 3; } }

.footer-quick{ display:grid; gap: var(--space-4); grid-template-columns: repeat(12, 1fr); }
.footer-quick a{ grid-column: span 12; border:1px solid #334155; border-radius: var(--radius-2); padding:.6rem .8rem; color:var(--fg); text-decoration:none; }
@media (min-width:720px){ .footer-quick a{ grid-column: span 6; } }
@media (min-width:1120px){ .footer-quick a{ grid-column: span 3; } }
.badge{ display:inline-flex; align-items:center; gap:.25rem; padding:.25rem .5rem; border:1px solid #334155; border-radius:999px; font-size:.875rem; color:var(--muted); }