/* ============================================================
   Suzy Portfolio — Shared Stylesheet
   Dark theme · v1.1
   ============================================================ */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Tokens ── */
:root {
  --bg:          #0a0a0f;
  --bg-2:        #111118;
  --bg-3:        #1a1a24;
  --border:      rgba(255,255,255,0.08);
  --border-hover:rgba(124,92,252,0.4);
  --accent:      #7c5cfc;
  --accent-2:    #a78bfa;
  --accent-glow: rgba(124,92,252,0.25);
  --text:        #f0eeff;
  --text-muted:  #8b8ca8;
  --text-dim:    #5c5d75;
  --radius:      12px;
  --radius-lg:   20px;
  --nav-h:       64px;
}

/* ── Base ── */
html { scroll-behavior: smooth; }

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a  { color: inherit; }

/* Lucide icons inline sizing */
i[data-lucide] { display: inline-flex; align-items: center; }
i[data-lucide] svg { width: 1em; height: 1em; }

/* ── Typography ── */
h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700; letter-spacing: -0.01em; }
h3 { font-size: 1.1rem; font-weight: 600; }
h4 { font-size: 0.95rem; font-weight: 600; }
p  { color: var(--text-muted); font-size: 1rem; }

/* ── Layout ── */
.container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
section    { padding: 100px 0; }

/* ================================================================
   Navigation
   ================================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: var(--nav-h);
  background: rgba(10,10,15,0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 100%;
}
.nav__logo {
  font-size: 1.05rem; font-weight: 700;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  text-decoration: none; flex-shrink: 0;
}

/* Desktop links */
.nav__links {
  display: flex; gap: 28px; list-style: none; align-items: center;
}
.nav__links a {
  color: var(--text-muted); text-decoration: none; font-size: 0.88rem;
  transition: color 0.2s; white-space: nowrap;
}
.nav__links a:hover,
.nav__links a.active { color: var(--text); }

/* Hamburger button – hidden on desktop */
.nav__hamburger {
  display: none;
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); padding: 6px;
  transition: color 0.2s;
}
.nav__hamburger:hover { color: var(--text); }

/* Mobile drawer */
.nav__drawer {
  display: none; /* shown via JS */
  position: fixed; top: var(--nav-h); left: 0; right: 0;
  background: rgba(10,10,15,0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  padding: 16px 24px 24px;
  z-index: 199;
  flex-direction: column; gap: 0;
}
.nav__drawer.open { display: flex; }
.nav__drawer a {
  display: block; padding: 14px 0;
  color: var(--text-muted); text-decoration: none; font-size: 1rem; font-weight: 500;
  border-bottom: 1px solid var(--border);
  transition: color 0.2s;
}
.nav__drawer a:last-child { border-bottom: none; }
.nav__drawer a:hover,
.nav__drawer a.active { color: var(--text); }

/* ── Responsive nav ── */
@media (max-width: 768px) {
  .nav__links     { display: none; }
  .nav__hamburger { display: flex; }
}

/* ================================================================
   Buttons
   ================================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border-radius: 10px;
  font-size: 0.93rem; font-weight: 600;
  text-decoration: none; transition: all 0.2s;
  border: none; cursor: pointer; line-height: 1;
}
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover {
  background: #6b4de0; transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--accent-glow);
}
.btn--outline {
  border: 1px solid var(--border); color: var(--text-muted);
  background: transparent;
}
.btn--outline:hover { border-color: var(--accent-2); color: var(--text); }

/* ================================================================
   Section utilities
   ================================================================ */
.section-label {
  display: inline-block;
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-2); font-weight: 600; margin-bottom: 12px;
}
.section-title { margin-bottom: 14px; }
.section-desc  { max-width: 520px; margin-bottom: 56px; }
.divider {
  width: 36px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  margin-bottom: 48px;
}

/* ── Gradient text ── */
.gradient-text {
  background: linear-gradient(135deg, #fff 30%, var(--accent-2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

/* ── Tag / Badge ── */
.tag {
  display: inline-block;
  padding: 3px 12px; border-radius: 100px; font-size: 0.73rem; font-weight: 500;
  border: 1px solid var(--border); color: var(--text-dim);
}
.tag--accent {
  background: rgba(124,92,252,0.12); color: var(--accent-2);
  border-color: rgba(124,92,252,0.25);
}

/* ── Card base ── */
.card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.card:hover {
  border-color: var(--border-hover);
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.4);
}

/* ================================================================
   Footer
   ================================================================ */
.footer {
  border-top: 1px solid var(--border);
  padding: 32px 0; text-align: center;
}
.footer p { font-size: 0.8rem; color: var(--text-dim); }
.footer a  { color: var(--text-dim); text-decoration: none; transition: color 0.2s; }
.footer a:hover { color: var(--accent-2); }

/* ── Back link ── */
.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-muted); text-decoration: none; font-size: 0.88rem;
  transition: color 0.2s; margin-bottom: 40px;
}
.back-link:hover { color: var(--accent-2); }

/* ── Global responsive ── */
@media (max-width: 768px) {
  section { padding: 72px 0; }
}