/* ============================================================
   components.css — reusable UI: nav, buttons, features, cards,
   tags, about, contact, footer
   ============================================================ */

/* NAV */
nav {
  position:sticky; top:0; z-index:100; height:var(--nav-h);
  background:var(--nav-bg); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; padding:0 2.5rem;
}
.nav-brand { display:flex; align-items:center; gap:12px; text-decoration:none; flex-shrink:0; }
#asset-mark      { height:48px; width:auto; mix-blend-mode:screen; display:block; }
#asset-wordmark  { height:40px; width:auto; mix-blend-mode:screen; display:block; }
.nav-spacer { flex:1; }
.nav-links { display:flex; align-items:center; gap:2rem; }
.nav-links a {
  font-family:'Barlow',sans-serif; font-size:0.78rem; font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase;
  color:var(--text-muted); text-decoration:none;
  transition:color .2s; position:relative; padding-bottom:2px;
}
.nav-links a:hover { color:var(--text); }
.nav-links a.active { color:var(--accent); }
.nav-links a.active::after { content:''; position:absolute; bottom:-2px; left:0; right:0; height:2px; background:var(--accent); border-radius:1px; }

/* Mobile menu toggle — hidden on desktop, revealed ≤768px (see responsive.css) */
.nav-toggle {
  display:none; background:transparent; border:1px solid var(--border);
  border-radius:var(--btn-radius); padding:.5rem; cursor:pointer;
  color:var(--text); line-height:0; transition:border-color .2s, color .2s;
}
.nav-toggle:hover { border-color:var(--border-hover); color:var(--accent); }
.nav-toggle svg { width:22px; height:22px; display:block; }

/* BUTTONS */
.btn-primary {
  cursor:pointer; font-family:var(--font-display); font-weight:700; font-size:0.9rem; letter-spacing:0.1em; text-transform:uppercase;
  color:#0d0d0d; background:var(--accent); border:2px solid var(--accent);
  padding:0.7rem 1.6rem; border-radius:var(--btn-radius);
  text-decoration:none; transition:background .2s, transform .15s; display:inline-block;
}
.btn-primary:hover { background:#e8a000; border-color:#e8a000; transform:translateY(-1px); }
.btn-outline {
  cursor:pointer; font-family:var(--font-display); font-weight:700; font-size:0.9rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--text); background:transparent; border:2px solid rgba(255,255,255,0.25);
  padding:0.7rem 1.6rem; border-radius:var(--btn-radius);
  text-decoration:none; transition:border-color .2s, color .2s, transform .15s; display:inline-block;
}
.btn-outline:hover { border-color:var(--accent); color:var(--accent); transform:translateY(-1px); }

/* FEATURES */
.features { background:var(--bg-feat); border-top:1px solid var(--border); border-bottom:1px solid var(--border); display:grid; grid-template-columns:repeat(4,1fr); }
.feature { padding:2.2rem 1.5rem; display:flex; flex-direction:column; align-items:center; text-align:center; gap:0.6rem; border-right:1px solid var(--border); transition:background .2s; }
.feature:last-child { border-right:none; }
.feature:hover { background:rgba(255,176,0,0.04); }
.feature-icon { width:40px; height:40px; display:flex; align-items:center; justify-content:center; color:var(--accent); margin-bottom:0.3rem; }
.feature-title { font-family:var(--font-display); font-weight:700; font-size:1rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--text); }
.feature-desc  { font-family:'Barlow',sans-serif; font-size:0.8rem; color:var(--text-muted); line-height:1.5; }

/* CARDS */
.proj-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); gap:1rem; }
.card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--card-radius); padding:1.5rem 1.75rem; text-decoration:none; display:flex; flex-direction:column; transition:border-color .25s, background .25s, transform .2s; position:relative; overflow:hidden; }
.card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); opacity:0; transition:opacity .25s; }
.card:hover { border-color:var(--border-hover); background:var(--bg-card2); transform:translateY(-2px); }
.card:hover::before { opacity:1; }
.card:hover .card-arrow { color:var(--accent); transform:translate(3px,-3px); }
.card-domain { font-family:var(--font-body); font-size:0.62rem; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent2); margin-bottom:0.45rem; }
.card-title { font-family:var(--font-display); font-weight:700; font-size:1.1rem; color:var(--text); letter-spacing:0.02em; margin-bottom:0.5rem; display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; }
.card-title span { flex:1; }
.card-arrow { color:var(--text-dim); font-size:0.95rem; transition:color .2s, transform .2s; flex-shrink:0; margin-top:1px; }
.card-desc { font-family:var(--font-body); font-size:0.82rem; color:var(--text-muted); line-height:1.75; flex:1; margin-bottom:1rem; }
.card-tags { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:auto; }
.tag { font-family:var(--font-body); font-size:0.63rem; font-weight:500; letter-spacing:.07em; text-transform:uppercase; padding:.2rem .55rem; border-radius:var(--btn-radius); border:1px solid var(--accent-dim); color:var(--accent2); background:var(--accent-glow); }
.tag.gray { border-color:var(--border); color:var(--text-dim); background:transparent; }

/* ABOUT */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.about-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--card-radius); padding:1.4rem 1.6rem; }
.about-card.wide { grid-column:1/-1; }
.about-label { font-family:var(--font-body); font-size:0.62rem; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); margin-bottom:0.5rem; }
.about-val { font-family:var(--font-body); font-size:0.84rem; color:var(--text-muted); line-height:1.7; }
.about-val strong { color:var(--text); font-weight:500; }
.about-val a { color:var(--accent2); text-decoration:none; border-bottom:1px solid var(--accent-dim); transition:color .2s, border-color .2s; }
.about-val a:hover { color:var(--accent); border-bottom-color:var(--border-hover); }

/* CONTACT */
.contact-row { display:flex; flex-wrap:wrap; gap:.75rem; }
.contact-link { font-family:var(--font-body); font-size:.75rem; font-weight:500; letter-spacing:.06em; color:var(--text-muted); text-decoration:none; display:flex; align-items:center; gap:.4rem; border:1px solid var(--border); padding:.42rem .95rem; border-radius:var(--btn-radius); background:var(--bg-card); transition:color .2s, border-color .2s, background .2s; }
.contact-link:hover { color:var(--accent); border-color:var(--border-hover); background:var(--accent-glow); }

/* FOOTER */
footer { padding:2.5rem 0 2rem; border-top:1px solid var(--border); margin-top:4rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem; }
footer p { font-family:var(--font-body); font-size:.68rem; color:var(--text-dim); letter-spacing:.06em; }
footer a { color:var(--text-dim); text-decoration:none; transition:color .2s; }
footer a:hover { color:var(--accent); }