/* ═══════════════════════════════════════════
   DESIGN TOKENS
   ═══════════════════════════════════════════ */
:root {
  --sf-accent: #22d3ee;
  --sf-accent-2: #a78bfa;
  --sf-accent-3: #f472b6;
  --sf-accent-4: #34d399;
  --sf-accent-5: #fbbf24;
  --sf-dark: #08090d;
  --sf-surface: #0e1018;
  --sf-surface-2: #151721;
  --sf-surface-3: #1c1f2e;
  --sf-border: rgba(255,255,255,0.06);
  --sf-border-hover: rgba(255,255,255,0.12);
  --sf-text: #e4e4e7;
  --sf-text-muted: #8a8a93;
  --sf-text-dim: #82828c;
  --sf-radius: 16px;
  --sf-radius-sm: 10px;
  --sf-radius-full: 100px;
  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-serif: 'Instrument Serif', serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  font-family: var(--font-display);
  background: var(--sf-dark);
  color: var(--sf-text);
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(34,211,238,0.25); color: #fff; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--sf-dark); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }

/* ═══════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════ */
.gradient-text {
  background: linear-gradient(135deg, var(--sf-accent) 0%, var(--sf-accent-2) 40%, var(--sf-accent-3) 70%, var(--sf-accent) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.scroll-reveal {
  opacity: 0; transform: translateY(35px);
  transition: all 0.7s var(--ease-out);
}
.scroll-reveal.visible { opacity: 1; transform: translateY(0); }
.scroll-reveal.d1 { transition-delay:.08s } .scroll-reveal.d2 { transition-delay:.16s }
.scroll-reveal.d3 { transition-delay:.24s } .scroll-reveal.d4 { transition-delay:.32s }
.scroll-reveal.d5 { transition-delay:.40s }

.mono { font-family: var(--font-mono); }
.serif { font-family: var(--font-serif); font-style: italic; }

/* Color utilities */
.text-accent { color: var(--sf-accent); }
.text-accent-2 { color: var(--sf-accent-2); }
.text-accent-4 { color: var(--sf-accent-4); }
.text-accent-5 { color: var(--sf-accent-5); }
.text-white { color: #fff; }

/* Layout utilities */
.text-center { text-align: center; }
.justify-center { justify-content: center; }
.w-full { width: 100%; }

/* Icon size utilities */
.icon-sm { font-size: 1.1rem; }
.icon-search { font-size: 1.15rem; }

/* Code highlight utilities */
.code-highlight { color: var(--sf-accent); font-size: 0.9em; }
.code-highlight-2 { color: var(--sf-accent-2); font-size: 0.85em; }
.code-highlight-5 { color: var(--sf-accent-5); font-size: 0.85em; }
.code-inline { font-size: 0.85em; }

/* Link utilities */
.link-accent { color: var(--sf-accent); }

/* ═══════════════════════════════════════════
   NAVBAR
   ═══════════════════════════════════════════ */
.navbar {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:0.7rem 1rem;
  display:flex; align-items:center; justify-content:space-between;
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  background:rgba(8,9,13,0.5);
  border-bottom:1px solid var(--sf-border);
  transition:all 0.4s var(--ease-out);
}
.navbar.scrolled { background:rgba(8,9,13,0.92); padding:0.55rem 1rem; box-shadow:0 8px 40px rgba(0,0,0,0.4); }

.nav-brand { display:flex; align-items:center; gap:0.6rem; text-decoration:none; color:#fff; }
.nav-brand-icon {
  height:36px; width:auto;
  display:block;
}
.nav-links {
  position:fixed; top:0; right:0; bottom:0;
  width:280px; max-width:80vw;
  display:flex; flex-direction:column; gap:0;
  list-style:none;
  background:rgba(14,16,24,0.98);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border-left:1px solid var(--sf-border);
  padding:5rem 2rem 2rem;
  transform:translateX(100%);
  transition:transform 0.35s var(--ease-out);
  z-index:2000;
}
.nav-links.mobile-open { transform:translateX(0); }
.nav-links a {
  color:var(--sf-text-muted); text-decoration:none;
  font-size:1.1rem; font-weight:600;
  padding:0.9rem 0;
  border-bottom:1px solid var(--sf-border);
  transition:color 0.25s; position:relative;
  display:block;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-1px; left:0;
  width:0; height:1.5px;
  background:linear-gradient(90deg, var(--sf-accent), var(--sf-accent-2));
  transition:width 0.3s var(--ease-out);
}
.nav-links a:hover { color:#fff; }
.nav-links a:hover::after { width:100%; }

.nav-actions { display:flex; align-items:center; gap:0.8rem; }

.nav-icon-btn {
  width:44px; height:44px; border-radius:10px;
  border:1px solid var(--sf-border); background:rgba(255,255,255,0.03);
  color:var(--sf-text-muted); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.25s; font-size:1.1rem;
}
.nav-icon-btn:hover { border-color:var(--sf-border-hover); color:#fff; background:rgba(255,255,255,0.06); }


/* ═══════════════════════════════════════════
   BUTTONS (shared)
   ═══════════════════════════════════════════ */
.btn {
  padding:0.8rem 1.5rem; border-radius:var(--sf-radius-full);
  font-family:var(--font-display); font-size:0.95rem; font-weight:600;
  cursor:pointer; transition:all 0.3s; border:none;
  text-decoration:none; display:inline-flex; align-items:center; gap:0.5rem;
  justify-content:center; min-height:48px;
}
.btn-primary {
  background:linear-gradient(135deg, var(--sf-accent), var(--sf-accent-2));
  color:#000; box-shadow:0 4px 25px rgba(34,211,238,0.25);
  position:relative; overflow:hidden;
}
.btn-primary::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg, transparent, rgba(255,255,255,0.2)); opacity:0; transition:opacity 0.3s; }
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 8px 40px rgba(34,211,238,0.35); }
.btn-primary:hover::before { opacity:1; }

.btn-ghost {
  background:transparent; color:#fff;
  border:1px solid rgba(255,255,255,0.15); backdrop-filter:blur(4px);
}
.btn-ghost:hover { border-color:rgba(255,255,255,0.3); background:rgba(255,255,255,0.04); transform:translateY(-2px); }

.btn-creator {
  background:linear-gradient(135deg, var(--sf-accent-5), #f97316);
  color:#000; box-shadow:0 4px 25px rgba(251,191,36,0.2);
  position:relative; overflow:hidden;
}
.btn-creator:hover { transform:translateY(-3px); box-shadow:0 8px 40px rgba(251,191,36,0.35); }

.btn--full { width:100%; justify-content:center; }
.btn--lg { font-size:1.05rem; padding:0.9rem 2.5rem; }

/* ═══════════════════════════════════════════
   TERMINAL DOTS (shared)
   ═══════════════════════════════════════════ */
.terminal-dot { width:10px; height:10px; border-radius:50%; }
.terminal-dot.r { background:#ef4444; } .terminal-dot.y { background:#eab308; } .terminal-dot.g { background:#22c55e; }

/* ═══════════════════════════════════════════
   SECTION LAYOUT
   ═══════════════════════════════════════════ */
.section { padding:3.5rem 1.25rem; max-width:1200px; margin:0 auto; position:relative; }
.section-header { margin-bottom:3rem; }
.section-header--center { text-align:center; }
.section-label { display:inline-flex; align-items:center; gap:0.4rem; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.14em; color:var(--sf-accent); margin-bottom:0.8rem; }
.section-label--center { justify-content:center; }
.section-label--gold { color:var(--sf-accent-5); }
.section-label .material-icons-outlined { font-size:0.9rem; }
.section-title { font-size:clamp(2rem,4vw,3rem); font-weight:800; letter-spacing:-0.03em; line-height:1.15; margin-bottom:0.8rem; }
.section-title--center { margin:0 auto 0.8rem; }
.section-desc { color:var(--sf-text-muted); max-width:550px; font-size:1rem; }
.section-desc--center { margin:0 auto; }

/* ═══════════════════════════════════════════
   CATEGORY PILLS
   ═══════════════════════════════════════════ */
.cat-pills { display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:2rem; }
.cat-pill {
  padding:0.55rem 1rem; border-radius:var(--sf-radius-full);
  background:rgba(255,255,255,0.03); border:1px solid var(--sf-border);
  font-family:var(--font-display); font-size:0.8rem; font-weight:600;
  color:var(--sf-text-muted); cursor:pointer; transition:all 0.25s; white-space:nowrap;
  min-height:44px; display:inline-flex; align-items:center;
}
.cat-pill:hover { border-color:var(--sf-border-hover); color:#fff; background:rgba(255,255,255,0.05); }
.cat-pill.active { background:linear-gradient(135deg, rgba(34,211,238,0.12), rgba(167,139,250,0.08)); border-color:rgba(34,211,238,0.3); color:var(--sf-accent); }

/* ═══════════════════════════════════════════
   SHARED CARD COMPONENTS
   ═══════════════════════════════════════════ */
.product-icon { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; }

.product-card-badges { display:flex; gap:0.35rem; flex-wrap:wrap; justify-content:flex-end; }
.ai-badge { font-family:var(--font-mono); font-size:0.6rem; font-weight:600; padding:0.2rem 0.5rem; border-radius:6px; border:1px solid; white-space:nowrap; }
.ai-badge.claude { border-color:rgba(214,162,100,0.3); color:#d6a264; background:rgba(214,162,100,0.08); }
.ai-badge.gpt { border-color:rgba(16,163,127,0.3); color:#10a37f; background:rgba(16,163,127,0.08); }
.ai-badge.gemini { border-color:rgba(66,133,244,0.3); color:#4285f4; background:rgba(66,133,244,0.08); }
.ai-badge.cursor { border-color:rgba(244,114,182,0.3); color:#f472b6; background:rgba(244,114,182,0.08); }
.ai-badge.all { border-color:rgba(34,211,238,0.3); color:var(--sf-accent); background:rgba(34,211,238,0.08); }

.product-author {
  padding:0 1.5rem; margin:0.4rem 0 0.6rem;
  display:flex; align-items:center; gap:0.4rem;
  position:relative; z-index:1;
}
.author-avatar {
  width:18px; height:18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:0.5rem; font-weight:700; color:#000;
}
.author-name { font-size:0.72rem; color:var(--sf-text-dim); }
.author-verified { font-size:0.8rem; color:var(--sf-accent); margin-left:-2px; }

.meta-item { display:flex; align-items:center; gap:0.3rem; font-size:0.72rem; color:var(--sf-text-dim); }
.meta-item .material-icons-outlined { font-size:0.85rem; }

/* ═══════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════ */
footer { padding:3rem 2rem; text-align:center; border-top:1px solid var(--sf-border); }
.footer-links { display:flex; gap:1rem 1.5rem; justify-content:center; flex-wrap:wrap; margin-bottom:1.5rem; }
.footer-links a { color:var(--sf-text-dim); text-decoration:none; font-size:0.8rem; transition:color 0.25s; }
.footer-links a:hover { color:var(--sf-accent); }
footer p { color:var(--sf-text-dim); font-size:0.78rem; }

/* ═══════════════════════════════════════════
   MOBILE NAV
   ═══════════════════════════════════════════ */
.nav-overlay {
  position:fixed; inset:0; z-index:1999;
  background:rgba(0,0,0,0.5);
  opacity:0; pointer-events:none;
  transition:opacity 0.3s;
}
.nav-overlay.visible { opacity:1; pointer-events:all; }

.nav-hamburger {
  display:flex; flex-direction:column; justify-content:center;
  gap:5px; width:44px; height:44px;
  background:none; border:none; cursor:pointer;
  padding:11px;
}
.nav-hamburger span {
  display:block; width:100%; height:2px;
  background:#fff; border-radius:2px;
  transition:all 0.3s var(--ease-out);
}
.nav-hamburger.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.nav-hamburger.active span:nth-child(2) { opacity:0; }
.nav-hamburger.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* ═══════════════════════════════════════════
   AUTH UI (Navbar)
   ═══════════════════════════════════════════ */
.nav-login-btn {
  display:flex; align-items:center; gap:0.4rem;
  padding:0.45rem 1rem; border-radius:var(--sf-radius-full);
  border:1px solid var(--sf-border); background:rgba(255,255,255,0.03);
  color:var(--sf-text); font-weight:600; font-size:0.82rem;
  cursor:pointer; transition:all 0.25s; font-family:var(--font-display);
  text-decoration:none;
}
.nav-login-btn:hover {
  border-color:var(--sf-border-hover); background:rgba(255,255,255,0.06); color:#fff;
}

.nav-user-menu {
  position:relative; display:flex; align-items:center; cursor:pointer;
}
.nav-user-avatar {
  width:32px; height:32px; border-radius:50%;
  border:2px solid var(--sf-border); object-fit:cover;
  transition:border-color 0.25s;
}
.nav-user-avatar:hover { border-color:var(--sf-accent); }

.nav-user-dropdown {
  display:none; position:absolute; top:calc(100% + 8px); right:0;
  min-width:200px; background:var(--sf-surface-2);
  border:1px solid var(--sf-border); border-radius:var(--sf-radius-sm);
  box-shadow:0 8px 32px rgba(0,0,0,0.4); overflow:hidden; z-index:100;
}
.nav-user-dropdown.open { display:block; }

.dropdown-header {
  padding:0.8rem 1rem; border-bottom:1px solid var(--sf-border);
}
.dropdown-name {
  font-size:0.85rem; font-weight:600; color:#fff;
}
.dropdown-item {
  display:flex; align-items:center; gap:0.6rem; width:100%;
  padding:0.7rem 1rem; font-size:0.85rem; color:var(--sf-text-muted);
  text-decoration:none; border:none; background:none; cursor:pointer;
  font-family:var(--font-display); transition:all 0.2s;
}
.dropdown-item:hover { background:rgba(255,255,255,0.05); color:#fff; }
.dropdown-item .material-icons-outlined { font-size:1.1rem; }

/* ═══════════════════════════════════════════
   SPINNER
   ═══════════════════════════════════════════ */
.spinner {
  width:40px; height:40px; border-radius:50%;
  border:3px solid var(--sf-border);
  border-top-color:var(--sf-accent);
  animation:spin 0.8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* Clickable cards */
.product-card[onclick], .skill-card[onclick] { cursor:pointer; }

/* ═══════════════════════════════════════════
   RESPONSIVE — Shared
   ═══════════════════════════════════════════ */

/* ─── 480px+ (Large phones) ─── */
@media (min-width:480px) {
  .btn { padding:0.8rem 2rem; }
}

/* ─── 769px+ (Tablet / Desktop) ─── */
@media (min-width:769px) {
  .navbar { padding:0.9rem 2rem; }
  .navbar.scrolled { padding:0.65rem 2rem; }

  .nav-links {
    position:static; width:auto; max-width:none;
    flex-direction:row; gap:2rem;
    background:none; backdrop-filter:none; -webkit-backdrop-filter:none;
    border-left:none; padding:0;
    transform:none; transition:none;
  }
  .nav-links a {
    font-size:0.82rem; font-weight:500;
    padding:0; border-bottom:none;
    display:inline;
  }

  .nav-hamburger { display:none; }
  .nav-overlay { display:none; }

  .section { padding:6rem 2rem; }
  .footer-links { gap:2rem; }
}