/* ============================================
   autonomiqtech.com — All-in-One Web Tools
   Dark-first, inspired by Vercel, Linear, Raycast, shadcn/ui
   ============================================ */
:root {
  --bg: #09090B;
  --card: #18181B;
  --card-hover: #1F1F23;
  --primary: #FFFFFF;
  --accent: #6366F1;
  --accent-2: #818CF8;
  --accent-glow: rgba(99,102,241,.5);
  --border: #27272A;
  --border-light: #1F1F23;
  --text: #FAFAFA;
  --text-muted: #A1A1AA;
  --text-dim: #71717A;
  --success: #22C55E;
  --danger: #EF4444;

  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px; --s6:48px; --s7:64px; --s8:80px; --s9:96px;
  --radius-sm:10px; --radius:14px; --radius-lg:20px; --radius-full:999px;
  --shadow: 0 4px 24px rgba(0,0,0,.4);
  --shadow-lg: 0 20px 60px rgba(0,0,0,.6);
  --glow: 0 0 40px rgba(99,102,241,.25);
  --font-head: 'Space Grotesk','Manrope',-apple-system,sans-serif;
  --font-body: 'Inter',-apple-system,sans-serif;
  --font-mono: 'JetBrains Mono',monospace;
  --ease: cubic-bezier(.22,1,.36,1);
  --nav-h: 64px;
}
[data-theme="light"] {
  --bg:#FAFAFA; --card:#FFFFFF; --card-hover:#F4F4F5; --primary:#09090B;
  --border:#E4E4E7; --border-light:#F4F4F5; --text:#09090B; --text-muted:#52525B; --text-dim:#A1A1AA;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--font-body); background:var(--bg); color:var(--text); line-height:1.6; font-size:15px; transition:background .3s var(--ease),color .3s var(--ease); overflow-x:hidden; }
h1,h2,h3,h4 { font-family:var(--font-head); font-weight:700; line-height:1.15; letter-spacing:-.02em; color:var(--text); }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }
textarea,input,select { font-family:inherit; }
.mono { font-family:var(--font-mono); }
.container { max-width:1160px; margin:0 auto; padding:0 var(--s3); }
.section { padding:var(--s8) 0; }
.eyebrow { font-family:var(--font-head); font-weight:600; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-2); margin-bottom:var(--s2); }
.section-head { text-align:center; max-width:600px; margin:0 auto var(--s6); }
.section-head h2 { font-size:clamp(26px,4vw,38px); margin-bottom:var(--s2); }
.section-head p { color:var(--text-muted); font-size:17px; }

.btn { display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:var(--radius-sm); font-family:var(--font-head); font-weight:600; font-size:14px; transition:all .2s var(--ease); white-space:nowrap; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent-2); transform:translateY(-1px); box-shadow:var(--glow); }
.btn-secondary { background:var(--card); color:var(--text); border:1px solid var(--border); }
.btn-secondary:hover { border-color:var(--accent); background:var(--card-hover); }
.btn-ghost { background:transparent; border:1px solid var(--border); color:var(--text); }
.btn-ghost:hover { background:var(--card-hover); }
.btn svg { width:16px; height:16px; }

.navbar { position:fixed; top:0; left:0; right:0; height:var(--nav-h); z-index:100; display:flex; align-items:center; background:rgba(9,9,11,.7); backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px); border-bottom:1px solid var(--border); }
[data-theme="light"] .navbar { background:rgba(250,250,250,.7); }
.nav-inner { max-width:1160px; margin:0 auto; padding:0 var(--s3); width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--s3); }
.logo { display:flex; align-items:center; gap:9px; font-family:var(--font-head); font-weight:700; font-size:17px; letter-spacing:-.02em; }
.logo-mark { width:30px; height:30px; border-radius:8px; background:linear-gradient(135deg,var(--accent),#A855F7); display:grid; place-items:center; color:#fff; box-shadow:var(--glow); }
.logo-mark svg { width:17px; height:17px; }
.nav-links { display:flex; align-items:center; gap:2px; }
.nav-links a { font-weight:500; font-size:14px; color:var(--text-muted); padding:7px 12px; border-radius:var(--radius-sm); transition:all .2s var(--ease); }
.nav-links a:hover { color:var(--text); background:var(--card-hover); }
.nav-actions { display:flex; align-items:center; gap:var(--s1); }
.icon-btn { width:38px; height:38px; border-radius:var(--radius-sm); display:grid; place-items:center; color:var(--text-muted); transition:all .2s var(--ease); }
.icon-btn:hover { color:var(--text); background:var(--card-hover); }
.icon-btn svg { width:18px; height:18px; }
.cmd-btn { display:flex; align-items:center; gap:8px; padding:7px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-dim); font-size:13px; transition:all .2s; }
.cmd-btn:hover { border-color:var(--accent); color:var(--text); }
.cmd-btn kbd { background:var(--card-hover); border:1px solid var(--border); border-radius:5px; padding:1px 6px; font-size:11px; font-family:var(--font-mono); }
.hamburger { display:none; }
.mobile-nav { position:fixed; inset:var(--nav-h) 0 0 0; background:var(--bg); z-index:99; transform:translateX(100%); transition:transform .35s var(--ease); padding:var(--s3); display:flex; flex-direction:column; gap:var(--s1); }
.mobile-nav.open { transform:translateX(0); }
.mobile-nav a { font-family:var(--font-head); font-weight:600; font-size:19px; padding:var(--s2); border-radius:var(--radius-sm); border-bottom:1px solid var(--border); }

.hero { padding:calc(var(--nav-h) + var(--s9)) 0 var(--s8); position:relative; overflow:hidden; text-align:center; }
.hero::before { content:''; position:absolute; top:-30%; left:50%; transform:translateX(-50%); width:800px; height:600px; background:radial-gradient(ellipse at center,var(--accent-glow),transparent 60%); opacity:.18; z-index:0; }
.hero-inner { position:relative; z-index:1; max-width:780px; margin:0 auto; }
.hero-badge { display:inline-flex; align-items:center; gap:8px; padding:6px 14px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-full); font-size:13px; font-weight:500; color:var(--text-muted); margin-bottom:var(--s3); }
.hero-badge .dot { width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); }
.hero h1 { font-size:clamp(38px,6vw,66px); margin-bottom:var(--s3); letter-spacing:-.03em; }
.hero h1 .grad { background:linear-gradient(135deg,var(--accent-2),#C084FC); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero p { font-size:clamp(16px,2.5vw,19px); color:var(--text-muted); max-width:560px; margin:0 auto var(--s5); }
.hero-search { max-width:540px; margin:0 auto var(--s3); position:relative; }
.hero-search input { width:100%; padding:16px 18px 16px 50px; border-radius:var(--radius); border:1px solid var(--border); background:var(--card); font-size:15px; color:var(--text); transition:all .2s var(--ease); }
.hero-search input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(99,102,241,.15); }
.hero-search svg { position:absolute; left:18px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--text-dim); }
.hero-search kbd { position:absolute; right:16px; top:50%; transform:translateY(-50%); background:var(--card-hover); border:1px solid var(--border); border-radius:5px; padding:2px 7px; font-size:11px; font-family:var(--font-mono); color:var(--text-dim); }
.hero-tags { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.hero-tags span { font-size:13px; color:var(--text-dim); padding:5px 12px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-full); }

.grid { display:grid; gap:var(--s2); }
.grid-4 { grid-template-columns:repeat(4,1fr); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-2 { grid-template-columns:repeat(2,1fr); }

.cat-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:var(--s3); transition:all .25s var(--ease); position:relative; overflow:hidden; }
.cat-card:hover { border-color:var(--accent); transform:translateY(-4px); box-shadow:var(--shadow); }
.cat-card::after { content:''; position:absolute; top:0; right:0; width:80px; height:80px; background:radial-gradient(circle,var(--accent-glow),transparent 70%); opacity:0; transition:opacity .3s; }
.cat-card:hover::after { opacity:.15; }
.cat-icon { width:42px; height:42px; border-radius:11px; display:grid; place-items:center; background:rgba(99,102,241,.12); color:var(--accent-2); margin-bottom:var(--s2); }
.cat-icon svg { width:22px; height:22px; }
.cat-card h3 { font-size:16px; margin-bottom:4px; }
.cat-card p { font-size:13px; color:var(--text-muted); }
.cat-card .count { font-size:12px; color:var(--text-dim); margin-top:var(--s2); font-family:var(--font-mono); }

.tool-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:var(--s3); transition:all .25s var(--ease); display:flex; align-items:center; gap:var(--s2); }
.tool-card:hover { border-color:var(--accent); transform:translateY(-3px); background:var(--card-hover); }
.tool-card .ti { width:40px; height:40px; border-radius:10px; display:grid; place-items:center; background:rgba(99,102,241,.1); color:var(--accent-2); flex-shrink:0; }
.tool-card .ti svg { width:20px; height:20px; }
.tool-card .tc h3 { font-size:15px; }
.tool-card .tc p { font-size:13px; color:var(--text-muted); }
.badge-new { font-size:10px; font-weight:700; color:var(--accent-2); background:rgba(99,102,241,.12); padding:2px 7px; border-radius:var(--radius-full); text-transform:uppercase; letter-spacing:.05em; margin-left:auto; align-self:flex-start; }
.badge-hot { font-size:10px; font-weight:700; color:#F59E0B; background:rgba(245,158,11,.12); padding:2px 7px; border-radius:var(--radius-full); text-transform:uppercase; letter-spacing:.05em; margin-left:auto; align-self:flex-start; }

.featured-tool { background:linear-gradient(135deg,rgba(99,102,241,.1),rgba(168,85,247,.06)); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--s6); position:relative; overflow:hidden; }
.featured-tool::before { content:''; position:absolute; top:-40%; right:-5%; width:400px; height:400px; background:radial-gradient(circle,var(--accent-glow),transparent 65%); opacity:.2; }
.ft-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--s5); align-items:center; position:relative; z-index:1; }
.ft-copy h2 { font-size:30px; margin-bottom:var(--s2); }
.ft-copy p { color:var(--text-muted); margin-bottom:var(--s3); }
.ft-demo { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:var(--s3); box-shadow:var(--shadow-lg); }
.ft-demo textarea { width:100%; min-height:90px; padding:12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg); color:var(--text); font-size:14px; resize:vertical; }
.ft-demo textarea:focus { outline:none; border-color:var(--accent); }
.ft-stats { display:flex; gap:var(--s2); margin-top:var(--s2); }
.ft-stat { flex:1; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px; text-align:center; }
.ft-stat .n { font-family:var(--font-mono); font-size:22px; font-weight:700; color:var(--accent-2); }
.ft-stat .l { font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; }

.footer { border-top:1px solid var(--border); padding:var(--s8) 0 var(--s4); margin-top:var(--s9); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--s5); margin-bottom:var(--s6); }
.footer-about p { color:var(--text-muted); font-size:14px; max-width:280px; margin-top:var(--s2); }
.footer-col h4 { font-size:13px; color:var(--text); margin-bottom:var(--s2); font-family:var(--font-head); }
.footer-col a { display:block; color:var(--text-muted); font-size:14px; padding:5px 0; transition:color .2s; }
.footer-col a:hover { color:var(--accent-2); }
.footer-bottom { border-top:1px solid var(--border); padding-top:var(--s3); display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--s2); }
.footer-bottom p { color:var(--text-dim); font-size:13px; }

.ad-band { margin:var(--s6) 0; text-align:center; }
.ad-band:has(.ad-box:empty) { display:none; }
.ad-box { min-height:90px; display:flex; align-items:center; justify-content:center; }
.ad-label { font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.1em; margin-bottom:8px; }

.reveal { opacity:0; transform:translateY(20px); transition:opacity .6s var(--ease),transform .6s var(--ease); }
.reveal.in { opacity:1; transform:translateY(0); }
.loader { position:fixed; inset:0; background:var(--bg); z-index:9999; display:grid; place-items:center; transition:opacity .5s ease,visibility .5s; }
.loader.hide { opacity:0; visibility:hidden; }
.loader .logo-mark { width:52px; height:52px; animation:pulse 1.2s var(--ease) infinite; }
@keyframes pulse { 0%,100%{transform:scale(1);opacity:1;} 50%{transform:scale(.9);opacity:.7;} }
.skeleton { background:linear-gradient(90deg,var(--card) 25%,var(--card-hover) 50%,var(--card) 75%); background-size:200% 100%; animation:shimmer 1.4s infinite; border-radius:var(--radius-sm); }
@keyframes shimmer { to { background-position:-200% 0; } }

/* Command palette */
.cmdk { position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,.6); backdrop-filter:blur(4px); display:none; align-items:flex-start; justify-content:center; padding-top:12vh; }
.cmdk.open { display:flex; }
.cmdk-box { width:min(600px,92vw); background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-lg); overflow:hidden; }
.cmdk-input { width:100%; padding:18px 20px; background:transparent; border:none; border-bottom:1px solid var(--border); color:var(--text); font-size:16px; }
.cmdk-input:focus { outline:none; }
.cmdk-list { max-height:340px; overflow-y:auto; padding:8px; }
.cmdk-item { display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:var(--radius-sm); color:var(--text-muted); font-size:14px; cursor:pointer; }
.cmdk-item:hover, .cmdk-item.active { background:var(--card-hover); color:var(--text); }
.cmdk-item svg { width:16px; height:16px; color:var(--accent-2); }

/* Page hero + tool detail */
.page-hero { padding:calc(var(--nav-h) + var(--s7)) 0 var(--s5); text-align:center; }
.page-hero h1 { font-size:clamp(30px,5vw,48px); margin-bottom:var(--s2); }
.page-hero p { color:var(--text-muted); font-size:17px; max-width:560px; margin:0 auto; }
.breadcrumb { font-size:13px; color:var(--text-dim); margin-bottom:var(--s2); }
.breadcrumb a { color:var(--accent-2); }
.tool-layout { display:grid; grid-template-columns:1.4fr 1fr; gap:var(--s4); align-items:start; }
.tool-panel { background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--s4); }
.tool-panel h2 { font-size:20px; margin-bottom:var(--s3); }
.tool-panel label { display:block; font-size:13px; font-weight:600; color:var(--text-muted); margin-bottom:6px; margin-top:var(--s2); }
.tool-panel textarea, .tool-panel input, .tool-panel select { width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg); color:var(--text); font-size:14px; }
.tool-panel textarea { min-height:140px; resize:vertical; font-family:var(--font-mono); }
.tool-panel textarea:focus, .tool-panel input:focus, .tool-panel select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(99,102,241,.12); }
.tool-actions { display:flex; gap:var(--s1); margin-top:var(--s3); flex-wrap:wrap; }
.out-box { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm); padding:14px; font-family:var(--font-mono); font-size:14px; min-height:60px; word-break:break-word; white-space:pre-wrap; color:var(--text); }
.stat-pills { display:flex; gap:var(--s1); flex-wrap:wrap; margin-top:var(--s3); }
.stat-pill { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 14px; flex:1; min-width:80px; text-align:center; }
.stat-pill .n { font-family:var(--font-mono); font-size:22px; font-weight:700; color:var(--accent-2); }
.stat-pill .l { font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; }
.side-guide { background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--s4); }
.side-guide h3 { font-size:16px; margin-bottom:var(--s2); }
.side-guide p { color:var(--text-muted); font-size:14px; margin-bottom:var(--s2); }
.side-guide ul { color:var(--text-muted); font-size:14px; margin-left:var(--s3); }
.related { margin-top:var(--s3); }
.related a { display:block; padding:10px 0; border-top:1px solid var(--border); color:var(--text-muted); font-size:14px; transition:color .2s; }
.related a:hover { color:var(--accent-2); }
.empty-state { text-align:center; color:var(--text-dim); padding:var(--s4); }
.empty-state svg { width:40px; height:40px; margin:0 auto var(--s2); opacity:.4; }

@media (max-width:960px){
  .grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);}
  .ft-grid{grid-template-columns:1fr;} .footer-grid{grid-template-columns:1fr 1fr;} .tool-layout{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .nav-links,.cmd-btn{display:none;} .hamburger{display:grid;}
  .grid-4,.grid-3,.grid-2{grid-template-columns:1fr;} .footer-grid{grid-template-columns:1fr;gap:var(--s3);}
  .section{padding:var(--s7) 0;} .featured-tool{padding:var(--s4);}
}