/* Data Bitches — v2 styles */
:root{
  --bg:#060608;
  --surface:#0d0f12;
  --ink:#f3f4f7;
  --muted:#b5b7c4;
  --border:#1a1d23;
  /* Neon palette with options; change --accent to swap the vibe */
  --neon-mint:#74f0c0;
  --neon-pink:#ff5bd9;
  --neon-blue:#69b7ff;
  --neon-purple:#c09bff;
  --accent: var(--neon-mint);
  --shadow: 0 10px 30px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.65;
  color:var(--ink);
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(116,240,192,.10), transparent 40%),
    radial-gradient(800px 400px at 10% -20%, rgba(105,183,255,.10), transparent 45%),
    var(--bg);
}

.container{width:min(1100px, 92%); margin-inline:auto}

a{color:var(--ink)}

.site-header{
  position:sticky; top:0; z-index:10;
  background: rgba(6,8,10,.45); backdrop-filter: blur(8px) saturate(140%);
  border-bottom:1px solid var(--border);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:.9rem 0}
.brand{display:flex; align-items:center; gap:.7rem; font-weight:800; letter-spacing:.3px; text-decoration:none}
.logomark{display:inline-grid; place-items:center; width:36px; height:36px; border-radius:10px;
  background:linear-gradient(135deg, var(--accent), var(--neon-blue));
  color:#07110c; font-weight:900; box-shadow:0 0 24px rgba(116,240,192,.55)}
.wordmark{font-size:1.05rem}

nav a{opacity:.92; text-decoration:none; margin-left:1rem; font-weight:650}
nav a:hover{opacity:1}
nav .cta{border:1px solid var(--accent); padding:.45rem .8rem; border-radius:10px; box-shadow:0 0 12px rgba(116,240,192,.25) inset}

.hero{position:relative; padding:8rem 0 5rem}
.hero-inner{max-width:780px}
.hero h1{font-size: clamp(2rem, 5vw, 3.25rem); line-height:1.12; margin:0 0 1rem}
.tagline{font-size:1.15rem; color:var(--muted); margin:0 0 1.6rem}
.cta-row{display:flex; gap:.8rem; flex-wrap:wrap}

.btn{display:inline-block; text-decoration:none; border-radius:12px; padding:.85rem 1.15rem; font-weight:800; letter-spacing:.2px}
.btn.primary{background:var(--accent); color:#06100c; text-shadow:0 1px 0 rgba(255,255,255,.2)}
.btn.ghost{border:1px solid var(--border)}

.neon-glow{
  position:absolute; inset:auto -12% -30% -12%;
  height:280px; filter:blur(44px); opacity:.4;
  background:
    radial-gradient(620px 280px at 22% 20%, var(--accent), transparent 70%),
    radial-gradient(480px 240px at 68% 15%, var(--neon-blue), transparent 70%),
    radial-gradient(600px 260px at 48% 5%, var(--neon-purple), transparent 75%);
  pointer-events:none;
}

.cards{padding:3rem 0 1rem}
.cards h2, .about h2, .contact h2{font-size:1.6rem; margin-bottom:1rem}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem}
.card{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:1rem 1rem 1.1rem; box-shadow:var(--shadow)}
.card h3{margin-top:.2rem; margin-bottom:.3rem}
.card p{color:var(--muted); margin:.25rem 0 .5rem}
.bullets{margin:.2rem 0 0 1.1rem; color:var(--muted)}
.bullets li{margin:.2rem 0}

.about{padding:2rem 0}
.about p{color:var(--muted); max-width:70ch}
.pill-row{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.9rem}
.pill{border:1px solid var(--border); background: #0b0e12; padding:.35rem .6rem; border-radius:999px; font-weight:650; font-size:.9rem}

.contact{padding:2.2rem 0 3rem}
.note{color:var(--muted)}
.contact-form{display:grid; gap:.9rem; max-width:560px; margin-top:.5rem}
label{display:grid; gap:.35rem; font-weight:700}
input, textarea{
  width:100%; padding:.8rem .9rem; border-radius:12px; border:1px solid var(--border);
  background:#0b0e12; color:var(--ink)
}
input::placeholder, textarea::placeholder{color:#8a8ea0}
textarea{resize:vertical; min-height:120px}
button{cursor:pointer}

.form-note{color:var(--muted); font-size:.9rem}

.site-footer{border-top:1px solid var(--border); margin-top:2rem; padding:1.2rem 0 2.2rem; color:var(--muted)}
.footer-inner{display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap}
.footer-links a{color:var(--muted); text-decoration:none; margin-left:1rem}
.footer-links a:hover{color:var(--ink)}

/* Small helper: switch accent by toggling a class on <html> */
html.pink { --accent: var(--neon-pink); }
html.blue { --accent: var(--neon-blue); }
html.purple { --accent: var(--neon-purple); }