/* ------------------------
   Aurora CSS (unchanged feel)
   ------------------------ */
:root{
  --bg:#0b1020; --bg-elev:#121931; --text:#e6e9f2; --muted:#a6afc3;
  --brand:#79ffe1; --brand-2:#00c2ff; --accent:#ff7ad9; --border:#24304e;
  --shadow:0 10px 30px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.25);
  --radius:16px; --radius-sm:10px; --radius-lg:28px;
  --container:min(1120px,92vw); --nav-h:68px;
  --font:ui-sans-serif,system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial;
}
:root.light{ --bg:#f8fafc; --bg-elev:#ffffff; --text:#0f172a; --muted:#475569; --brand:#0ea5e9; --brand-2:#7c3aed; --accent:#ef4444; --border:#e5e7eb; --shadow:0 10px 30px rgba(2,6,23,.08),0 2px 8px rgba(2,6,23,.06); }

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:var(--font); color:var(--text);
  background: radial-gradient(1200px 600px at 10% -20%, rgba(124,58,237,.25), transparent 60%),
              radial-gradient(900px 500px at 110% 10%, rgba(14,165,233,.25), transparent 60%),
              linear-gradient(180deg, var(--bg) 0%, color-mix(in oklab, var(--bg), #000 5%) 100%);
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}

.container{width:var(--container); margin-inline:auto}
.section{padding:clamp(56px, 10vw, 110px) 0}
.card{background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow)}
.center{text-align:center}
.muted{color:var(--muted)}
.divider{height:1px; background:var(--border); margin:20px 0}
.grid{display:grid; gap:22px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.footer-grid{display:grid; gap:22px; grid-template-columns:2fr repeat(3,1fr)}
.footer-links{list-style:none; padding:0; margin:10px 0 0; display:grid; gap:8px}
.footer-bottom{margin-top:20px; display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}
.reveal{opacity:0; transform:translateY(14px); transition:all .6s cubic-bezier(.2,.8,.2,1)}
.reveal.show{opacity:1; transform:none}
.gradient-text{background:linear-gradient(90deg,var(--brand),var(--brand-2)); -webkit-background-clip:text; background-clip:text; color:transparent}

/* Header / Nav */
header{position:sticky; top:0; z-index:1000; backdrop-filter:saturate(140%) blur(8px); background:color-mix(in oklab, var(--bg), transparent 30%); border-bottom:1px solid var(--border)}
.nav{height:var(--nav-h); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.3px}
.brand svg{width:28px; height:28px}
.nav ul{list-style:none; display:flex; gap:18px; padding:0; margin:0; justify-content:center}
.nav a.link{color:var(--muted); font-weight:600; padding:8px 12px; border-radius:10px}
.nav a.link.active,.nav a.link:hover{color:var(--text); background:color-mix(in oklab, var(--brand), transparent 85%)}
.nav-actions{display:flex; justify-content:end; gap:10px}
.btn,button,input[type="submit"]{
  --bgc:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%);
  border:0; color:#0b1020; font-weight:800; letter-spacing:.3px; padding:12px 16px; border-radius:12px; cursor:pointer; background:var(--bgc);
  box-shadow:0 8px 20px color-mix(in oklab, var(--brand-2), transparent 80%); transition:transform .15s ease, filter .2s ease, box-shadow .2s ease;
}
.btn.secondary{--bgc:color-mix(in oklab, var(--bg-elev), #000 0%); color:var(--text); border:1px solid var(--border); box-shadow:none}
.btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0) scale(.98)}

.hamburger{display:none; width:42px; height:42px; align-items:center; justify-content:center; border-radius:10px; border:1px solid var(--border); background:var(--bg-elev)}
.hamburger span,.hamburger::before,.hamburger::after{content:""; display:block; width:20px; height:2px; background:var(--text); border-radius:2px; transition:.25s ease}
.hamburger span{margin:4px 0}
.nav.open .hamburger::before{transform:translateY(6px) rotate(45deg)}
.nav.open .hamburger::after{transform:translateY(-6px) rotate(-45deg)}
.nav.open .hamburger span{transform:scaleX(0)}
.nav ul{transition:.2s}

/* Hero */
.hero{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(24px,4vw,48px); align-items:center}
.kicker{color:var(--brand); font-weight:800; text-transform:uppercase; letter-spacing:.12em; font-size:.78rem}
h1{font-size:clamp(2.2rem,5vw,4rem); margin:6px 0 16px; line-height:1.05}
.lead{color:var(--muted); font-size:clamp(1rem,2.1vw,1.2rem); max-width:60ch}
.hero-cta{display:flex; gap:12px; margin-top:20px; flex-wrap:wrap}
.hero-art{position:relative; isolation:isolate; min-height:340px; border-radius:var(--radius-lg); overflow:hidden; background:
  radial-gradient(600px 300px at 70% 10%, color-mix(in oklab, var(--brand), transparent 70%), transparent 60%),
  radial-gradient(600px 300px at 0% 90%, color-mix(in oklab, var(--accent), transparent 75%), transparent 60%),
  linear-gradient(180deg, color-mix(in oklab, var(--bg-elev), #000 4%), color-mix(in oklab, var(--bg-elev), #000 8%));
  border:1px solid var(--border); box-shadow:var(--shadow)}
.hero-bubble{position:absolute; inset:-20% -10% auto auto; width:140%; height:140%; background:conic-gradient(from 180deg at 50% 50%, var(--brand), var(--brand-2), var(--accent), var(--brand)); filter:blur(80px) saturate(120%); opacity:.25; animation:float 12s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* Features (About) */
.feature{padding:22px; display:grid; gap:10px; position:relative; overflow:clip}
.feature i{width:38px; height:38px; display:grid; place-items:center; border-radius:9px; background:color-mix(in oklab, var(--brand), transparent 80%); color:var(--brand-2); font-style:normal; font-weight:900}
.feature p{color:var(--muted)}

/* Library controls */
.controls{padding:14px}
.controls-row{display:flex; gap:12px; flex-wrap:wrap}
.search-bar{flex:1; min-width:240px; padding:12px 14px; border-radius:12px; border:1px solid var(--border); background:color-mix(in oklab, var(--bg-elev), transparent 0%); color:var(--text)}
.select{padding:12px 14px; border-radius:12px; border:1px solid var(--border); background:var(--bg-elev); color:var(--text)}
.filters{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
.filter{padding:6px 12px; border:1px solid var(--border); border-radius:999px; background:var(--bg-elev); cursor:pointer}
.filter.active{background:var(--brand); color:#0b1020; font-weight:800}

/* Tool card grid */
.grid{gap:18px}
#toolsGrid{display:grid; grid-template-columns:repeat(4,1fr)}
.tool-card{display:grid; gap:10px; padding:16px}
.tool-head{display:flex; align-items:center; gap:10px}
.tool-icon{width:44px; height:44px; border-radius:10px; object-fit:contain; background:#fff; padding:4px; border:1px solid color-mix(in oklab, var(--border), #fff 20%)}
.tool-title{font-weight:800}
.tags{display:flex; gap:8px; flex-wrap:wrap}
.tag{font-size:.8rem; padding:4px 8px; border-radius:999px; background:var(--border)}
.tag.free{background:#10b981; color:#fff}
.tag.paid{background:#ef4444; color:#fff}
.tool-desc{color:var(--muted); font-size:.92rem; max-height:3.6em; overflow:hidden; transition:max-height .25s ease}
.tool-desc.open{max-height:220px}
.tool-actions{display:flex; gap:10px; flex-wrap:wrap}
.btn.small{padding:8px 10px; border-radius:10px}
.btn-link{color:var(--brand-2); font-weight:800}

/* Forms */
form{display:grid; gap:12px}
label{font-weight:700}
input,textarea,select{width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--border); background:color-mix(in oklab, var(--bg-elev), transparent 0%); color:var(--text); outline:none; transition:border-color .2s, box-shadow .2s}
input:focus,textarea:focus,select:focus{border-color:color-mix(in oklab, var(--brand), transparent 40%); box-shadow:0 0 0 4px color-mix(in oklab, var(--brand), transparent 85%)}
.error{color:#ef4444; font-size:.9rem}
.success{color:#36d399; font-weight:800}

/* Back to top */
.to-top{position:fixed; right:16px; bottom:16px; z-index:1002; width:46px; height:46px; border-radius:12px; border:1px solid var(--border); background:var(--bg-elev); display:grid; place-items:center; color:var(--text); box-shadow:var(--shadow); opacity:0; transform:translateY(10px); transition:.25s; cursor:pointer}
.to-top.show{opacity:1; transform:none}

/* Responsive */
@media (max-width:960px){
  .hero{grid-template-columns:1fr}
  #toolsGrid{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:1fr 1fr}
  .grid-2{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .nav ul{display:none}
  .nav.open ul{display:grid; position:absolute; top:var(--nav-h); left:0; right:0; gap:6px; padding:12px; background:var(--bg-elev); border-bottom:1px solid var(--border)}
  .hamburger{display:inline-flex}
}
@media (max-width:640px){
  #toolsGrid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}