/*
Theme Name: VCV Dark - Neon vCard
Theme URI:  https://example.com/vcv-dark
Author:     Your Name
Author URI: https://example.com
Description: Modern minimal dark vCard / CV / Portfolio theme with neon accents, single-page layout with sections and WP CPTs.
Version:    1.0.0
Text Domain: vcv-dark-theme
Tags: portfolio, one-column, dark, resume, personal, translation-ready
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&family=Space+Grotesk:wght@400;600&display=swap');
:root{
  --bg:#0b0f12;
  --surface:#0f1417;
  --muted:#9aa6b2;
  --text:#e6eef6;
  --accent:#00f0d0;
  --accent-2:#7f5aff;
  --container:1100px;
  --radius:12px;
  --transition:300ms cubic-bezier(.2,.9,.2,1);
  --glass: rgba(255,255,255,0.03);
  --card-shadow: 0 6px 28px rgba(0,0,0,0.6);
  --focus: 0 0 0 3px rgba(0,240,208,0.12);
}
html.dark { color-scheme: dark; background: var(--bg); }
*{box-sizing:border-box}
body{
  background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent), var(--bg);
  color:var(--text);
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  margin:0; line-height:1.45;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.site { display:flex; min-height:100vh; width:100%; }
.sidebar {
  width:320px; max-width:320px;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));
  border-right: 1px solid rgba(255,255,255,0.03);
  padding:30px; position:fixed; left:0; top:0; bottom:0;
  display:flex; flex-direction:column; gap:20px; z-index:40;
}
.brand { display:flex; gap:16px; align-items:center; }
.avatar { width:72px; height:72px; border-radius:50%; overflow:hidden; border:2px solid rgba(255,255,255,0.04); flex-shrink:0; }
.avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.name { font-weight:700; letter-spacing:0.2px; }
.role { color:var(--muted); font-size:13px }
.primary-nav { margin-top:8px; display:flex; flex-direction:column; gap:8px; }
.primary-nav a { color:var(--muted); text-decoration:none; padding:10px 12px; border-radius:8px; display:flex; gap:10px; align-items:center; transition:var(--transition); }
.primary-nav a:hover, .primary-nav a.active { color:var(--text); background:linear-gradient(90deg, rgba(255,255,255,0.02), transparent); box-shadow: none; }
.socials { margin-top:auto; display:flex; gap:10px; }
.main-wrap { margin-left:320px; padding:48px; width:100%; max-width:calc(var(--container) + 320px); }
.container { max-width:var(--container); margin:0 auto; }
.section { margin-bottom:48px; background:var(--surface); padding:28px; border-radius:var(--radius); box-shadow:var(--card-shadow); border:1px solid rgba(255,255,255,0.02); }
.section h2 { margin:0 0 14px; font-family: 'Space Grotesk', sans-serif; letter-spacing:0.6px; }
.hero { display:flex; align-items:center; gap:28px; min-height:72vh; padding:40px; border-radius:14px; position:relative; }
.hero .left { width:60%; }
.hero .cta { margin-top:18px; display:flex; gap:12px; }
.btn { display:inline-flex; align-items:center; gap:10px; padding:10px 16px; border-radius:10px; border:1px solid rgba(255,255,255,0.03); background:linear-gradient(90deg, rgba(255,255,255,0.02), transparent); color:var(--text); text-decoration:none; transition:transform var(--transition), box-shadow var(--transition); }
.btn.primary { background: linear-gradient(90deg, rgba(0,240,208,0.08), rgba(127,90,255,0.05)); border-color: rgba(0,240,208,0.12); box-shadow: 0 6px 18px rgba(0,240,208,0.06); }
.btn:hover { transform:translateY(-4px) }
.grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; }
.card { padding:18px; background:var(--glass); border-radius:12px; border:1px solid rgba(255,255,255,0.02) }
.progress { background:rgba(255,255,255,0.03); height:12px; border-radius:999px; overflow:hidden; }
.progress > span { display:block; height:100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius:999px; transition:width 700ms var(--transition); }
.portfolio-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
.portfolio-item { position:relative; overflow:hidden; border-radius:10px; cursor:pointer; }
.portfolio-item img { display:block; width:100%; height:200px; object-fit:cover; transition:transform 450ms ease; }
.portfolio-item:hover img { transform:scale(1.06); }
.testimonials { display:flex; gap:16px; overflow:hidden; position:relative; }
.contact-form input, .contact-form textarea { width:100%; padding:12px; border-radius:8px; background:transparent; border:1px solid rgba(255,255,255,0.06); color:var(--text); margin-bottom:10px; }
.contact-form button { padding:12px 18px; border-radius:8px; border:0; background:var(--accent); color:#022; }
@media (max-width: 980px){
  .sidebar { position:relative; width:100%; max-width:100%; flex-direction:row; align-items:center; padding:14px; height:auto; border-right: none; border-bottom:1px solid rgba(255,255,255,0.02); }
  .main-wrap { margin-left:0; padding:22px; }
  .grid { grid-template-columns: repeat(2, 1fr) }
  .portfolio-grid { grid-template-columns: repeat(2, 1fr) }
}
@media (max-width:600px){
  .grid { grid-template-columns: 1fr }
  .portfolio-grid { grid-template-columns: 1fr }
  .hero { flex-direction:column; }
  .sidebar { display:flex; gap:10px; align-items:center; }
}