:root {
  --primary: #8B5CF6;
  --bg: #0A0A0F;
  --card: #111118;
  --card2: #181820;
  --input: #1C1C28;
  --text: #E4E4EC;
  --muted: #6B6B7A;
  --dim: #3A3A48;
  --border: #1E1E2C;
  --radius: 10px;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--font); background:var(--bg); color:var(--text);
  line-height:1.6; -webkit-font-smoothing:antialiased; font-size:15px;
}
::selection { background:var(--primary); color:#fff; }
a { color:var(--primary); text-decoration:none; }
.container { max-width:960px; margin:0 auto; padding:0 20px; }

/* Nav */
nav {
  padding:14px 0; border-bottom:1px solid var(--border);
  background:rgba(10,10,15,0.85); position:sticky; top:0; z-index:100;
  backdrop-filter:blur(14px);
}
nav .container { display:flex; align-items:center; justify-content:space-between; }
nav .logo { font-weight:700; color:#fff; display:flex; align-items:center; gap:8px; font-size:1rem; }
nav .logo .m {
  width:20px; height:20px; border-radius:5px;
  background:linear-gradient(135deg, var(--primary), #EC4899);
  display:flex; align-items:center; justify-content:center;
  font-size:0.5rem; color:#fff; font-weight:700;
}
nav .logo span { color:#EC4899; }
nav .nav-links { display:flex; gap:16px; align-items:center; }
nav .nav-links a { color:var(--muted); font-size:0.8rem; transition:color .2s; }
nav .nav-links a:hover { color:#fff; }
.nav-toggle { display:none; background:none; border:none; color:var(--text); font-size:1.4rem; cursor:pointer; }
@media (max-width:720px) {
  .nav-toggle { display:block; }
  nav .nav-links { display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; background:var(--card); border-bottom:1px solid var(--border); padding:14px 20px; gap:10px; }
  nav .nav-links.open { display:flex; }
}

/* Buttons */
.btn {
  display:inline-flex; align-items:center; gap:6px; padding:9px 22px; border-radius:8px;
  font-weight:500; font-size:0.85rem; cursor:pointer; transition:all .2s;
  border:1px solid transparent; font-family:var(--font);
}
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { background:#9D71FF; transform:translateY(-1px); }
.btn-outline { background:transparent; border-color:var(--border); color:var(--text); }
.btn-outline:hover { border-color:var(--muted); color:#fff; }
.btn-lg { padding:12px 28px; font-size:0.9rem; }

/* Hero — clean, minimal */
.hero {
  padding:80px 0 60px; text-align:center;
  background:radial-gradient(ellipse 700px 400px at 50% 30%, rgba(139,92,246,0.06) 0%, transparent 60%);
}
.hero h1 {
  font-size:2.8rem; font-weight:700; line-height:1.15; margin-bottom:12px;
  letter-spacing:-0.02em;
}
.hero h1 span { background:linear-gradient(135deg, var(--primary), #EC4899); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.hero p {
  font-size:1rem; color:var(--muted); max-width:480px; margin:0 auto 28px;
}
@media (max-width:600px) {
  .hero { padding:48px 0 32px; }
  .hero h1 { font-size:1.8rem; }
}

/* Section */
.section { padding:48px 0; }
.section h2 { font-size:1.1rem; font-weight:600; margin-bottom:20px; color:var(--muted); text-transform:uppercase; letter-spacing:1px; }

/* Tool Grid — clean cards */
.tg { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:8px; }
.tc {
  background:var(--card); border:1px solid var(--border); border-radius:8px;
  padding:18px; transition:all .2s; display:block; position:relative;
}
.tc:hover { border-color:var(--primary); background:var(--card2); }
.tc.hot { border-color:rgba(139,92,246,0.15); }
.tc.hot:hover { border-color:var(--primary); }
.tc .hb {
  position:absolute; top:-7px; right:10px; background:var(--primary); color:#fff;
  padding:1px 8px; border-radius:6px; font-size:0.5rem; font-weight:600; text-transform:uppercase;
}
.tc .r { display:flex; align-items:center; gap:10px; }
.tc .r .ic { font-size:1.4rem; flex-shrink:0; }
.tc .r .nm { font-weight:600; font-size:0.9rem; }
.tc .dc { font-size:0.78rem; color:var(--muted); margin-top:6px; }

/* Agent showcase — small, subtle */
.as {
  max-width:600px; margin:24px auto 0; padding:16px 20px;
  background:var(--card); border:1px solid var(--border); border-radius:8px;
}
.as .h { font-size:0.65rem; color:var(--dim); text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; display:flex; justify-content:space-between; }
.as .g {
  display:grid; grid-template-columns:repeat(17,1fr); gap:3px;
}
.as .g .d {
  aspect-ratio:1; border-radius:3px; transition:all .3s;
  background:var(--input); border:1px solid var(--border);
}
.as .g .d:hover { border-color:var(--primary); transform:scale(2); z-index:10; }
.as .g .d.s1 { background:rgba(139,92,246,0.08); border-color:rgba(139,92,246,0.15); }
.as .g .d.s2 { background:rgba(139,92,246,0.15); border-color:rgba(139,92,246,0.3); }
.as .g .d.s3 { background:rgba(236,72,153,0.15); border-color:#EC4899; animation:pulse16 .8s infinite; }
@keyframes pulse16 { 0%,100%{opacity:.6} 50%{opacity:1} }

/* Footer */
footer { border-top:1px solid var(--border); padding:24px 0; margin-top:32px; }
footer .g { display:flex; gap:24px; justify-content:center; flex-wrap:wrap; font-size:0.8rem; color:var(--muted); }
footer .g a { color:var(--muted); }
footer .g a:hover { color:#fff; }
footer .cp { text-align:center; color:rgba(107,107,122,0.3); font-size:0.65rem; margin-top:16px; }

/* Tool pages */
.dt { max-width:640px; margin:0 auto; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:24px; }
.dt .g { margin-bottom:12px; }
.dt .g label { display:block; font-size:0.78rem; color:var(--muted); margin-bottom:3px; }
.dt .g input, .dt .g select, .dt .g textarea {
  width:100%; padding:9px 12px; border-radius:6px; background:var(--input);
  border:1px solid var(--border); color:#fff; font-size:0.85rem; outline:none; transition:border .2s;
  font-family:var(--font);
}
.dt .g input:focus, .dt .g select:focus, .dt .g textarea:focus { border-color:var(--primary); }
.dt .g textarea { resize:vertical; min-height:60px; }
.pb { width:100%; height:3px; background:var(--border); border-radius:2px; margin:10px 0; overflow:hidden; }
.pb .in { height:100%; background:linear-gradient(90deg, var(--primary), #EC4899); border-radius:2px; transition:width .25s; width:0%; }
.si { display:flex; justify-content:space-between; font-size:0.6rem; color:var(--dim); margin-bottom:4px; flex-wrap:wrap; gap:2px; }
.si .s { opacity:0.2; transition:all .3s; }
.si .s.active { opacity:1; color:var(--primary); font-weight:500; }
.si .s.done { opacity:0.5; color:var(--muted); }
.rc { margin-top:14px; padding:16px; border-radius:var(--radius); background:var(--input); border:1px solid var(--border); display:none; animation:fi .3s; }
.rc.show { display:block; }
@keyframes fi { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }
.rc .sp { padding:10px; background:var(--bg); border-radius:6px; margin:8px 0; font-size:0.85rem; line-height:1.5; }
.ctoast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--primary); color:#fff; padding:8px 20px; border-radius:6px; font-weight:500; font-size:0.82rem; z-index:999; animation:fi .3s, fo .3s 1.7s; }
@keyframes fo { from{opacity:1} to{opacity:0} }