*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0a0a0c;--fg:#e8e6e3;--fg2:#9a9692;--accent:#c8ff5a;
  --card-bg:#141418;--card-border:#222228;
  --radius:16px;
  --font:'Space Grotesk',system-ui,sans-serif;
  --mono:'JetBrains Mono',monospace;
}
html{font-size:16px;scroll-behavior:smooth}
body{
  font-family:var(--font);color:var(--fg);background:var(--bg);
  min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
.noise{
  position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:0.03;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a{color:inherit;text-decoration:none}

header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:1.25rem 2rem;
  background:rgba(10,10,12,0.8);backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,0.04);
}
.logo{font-size:1.3rem;font-weight:600;letter-spacing:-0.02em}
.logo .dot{color:var(--accent)}

main{max-width:1100px;margin:0 auto;padding:8rem 2rem 4rem}

.hero{text-align:center;margin-bottom:4rem}
.hero h1{
  font-size:clamp(2.2rem,5vw,3.6rem);font-weight:700;
  letter-spacing:-0.03em;line-height:1.1;margin-bottom:1rem;
}
.subtitle{font-size:1.15rem;color:var(--fg2);max-width:520px;margin:0 auto;line-height:1.6}

.tools-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:1.5rem;
}
.tool-card{
  background:var(--card-bg);border:1px solid var(--card-border);
  border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform 0.25s ease,border-color 0.25s ease,box-shadow 0.25s ease;
  cursor:pointer;
}
.tool-card:hover{
  transform:translateY(-4px);border-color:var(--accent);
  box-shadow:0 8px 40px rgba(200,255,90,0.06);
}
.tool-card.coming-soon{opacity:0.5;pointer-events:none;cursor:default}
.tool-card.coming-soon:hover{transform:none;border-color:var(--card-border);box-shadow:none}

.card-visual{height:200px;overflow:hidden;background:#111114;position:relative}
.card-visual canvas{width:100%;height:100%;display:block}
.card-visual.placeholder{display:flex;align-items:center;justify-content:center}
.placeholder-icon{font-size:3rem;color:var(--fg2);opacity:0.3}

.card-body{padding:1.25rem 1.5rem;flex:1}
.card-tag{
  display:inline-block;font-size:0.7rem;font-weight:600;
  text-transform:uppercase;letter-spacing:0.08em;
  color:var(--accent);margin-bottom:0.6rem;
}
.card-body h2{font-size:1.25rem;font-weight:600;margin-bottom:0.5rem;letter-spacing:-0.01em}
.card-body p{font-size:0.88rem;color:var(--fg2);line-height:1.6}

.card-footer{
  padding:1rem 1.5rem;border-top:1px solid var(--card-border);
}
.card-cta{font-size:0.82rem;font-weight:500;color:var(--accent)}

footer{
  text-align:center;padding:3rem 2rem;
  font-size:0.8rem;color:var(--fg2);opacity:0.5;
}

@media(max-width:600px){
  header{padding:1rem}
  main{padding:6rem 1rem 2rem}
  .tools-grid{grid-template-columns:1fr}
}