/* ============================================================
   BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'DM Sans', sans-serif;
  background-color: #09090b;
  color: #e4e4e7;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
::selection { background-color: rgba(59,130,246,0.3); color:#fff; }
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:#09090b; }
::-webkit-scrollbar-thumb { background:#3f3f46; border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:#52525b; }

/* ============================================================
   CSS VARIABLES
============================================================ */
:root {
  --font-display: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --accent: #3B82F6;
  --accent-violet: #8B5CF6;
}

/* ============================================================
   TYPOGRAPHY UTILITIES
============================================================ */
.font-display { font-family: var(--font-display); }
.font-sans { font-family: var(--font-body); }
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.text-gradient {
  background: linear-gradient(135deg, #60a5fa, #a78bfa, #60a5fa);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 4s ease infinite;
}

.section-label {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: #60a5fa; margin-bottom: 0.75rem;
}
.section-label::before { content:''; width:1.5rem; height:1px; background:#60a5fa; }

.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 700; color: #fff; line-height: 1.2; margin-bottom: 1rem;
}

/* ============================================================
   BUTTONS
============================================================ */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.75rem 1.5rem; border-radius: 9999px;
  font-family: var(--font-display); font-weight: 600; color: #fff;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  box-shadow: 0 4px 20px rgba(37,99,235,0.3);
  transition: all 0.2s; text-decoration: none; border: none; cursor: pointer;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 30px rgba(37,99,235,0.4); }
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.75rem 1.5rem; border-radius: 9999px; font-weight: 500;
  color: #d4d4d8; border: 1px solid #3f3f46;
  background: rgba(255,255,255,0.03); transition: all 0.2s; text-decoration: none; cursor: pointer;
}
.btn-ghost:hover { border-color: #71717a; color: #fff; background: rgba(255,255,255,0.06); }

/* ============================================================
   CARDS
============================================================ */
.card-dark { background: rgba(24,24,27,0.6); border: 1px solid #27272a; backdrop-filter: blur(10px); }
.card-glass { background: rgba(24,24,27,0.8); border: 1px solid rgba(63,63,70,0.5); backdrop-filter: blur(12px); }

/* ============================================================
   FORM ELEMENTS
============================================================ */
.form-input {
  width: 100%; padding: 0.875rem 1rem; border-radius: 0.75rem;
  background: rgba(39,39,42,0.5); border: 1px solid #3f3f46;
  color: #f4f4f5; font-family: var(--font-body); font-size: 1rem;
  transition: all 0.2s; outline: none;
}
.form-input::placeholder { color: #71717a; }
.form-input:focus { border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,0.2); }
.form-label { display: block; font-size: 0.875rem; font-weight: 500; color: #a1a1aa; margin-bottom: 0.375rem; }

/* ============================================================
   BADGES
============================================================ */
.badge { display: inline-flex; align-items: center; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; }
.badge-blue { background: rgba(59,130,246,0.1); color: #60a5fa; border: 1px solid rgba(59,130,246,0.2); }
.badge-green { background: rgba(16,185,129,0.1); color: #34d399; border: 1px solid rgba(16,185,129,0.2); }
.badge-yellow { background: rgba(245,158,11,0.1); color: #fbbf24; border: 1px solid rgba(245,158,11,0.2); }

/* ============================================================
   PAGE HERO
============================================================ */
.page-hero { position: relative; padding-top: 8rem; padding-bottom: 4rem; overflow: hidden; }

/* ============================================================
   PROSE (blog/project content)
============================================================ */
.prose-dark { color: #d4d4d8; line-height: 1.75; }
.prose-dark h1,.prose-dark h2,.prose-dark h3,.prose-dark h4 { font-family: var(--font-display); font-weight: 600; color: #fff; }
.prose-dark h2 { font-size: 1.5rem; margin-top: 2rem; margin-bottom: 1rem; }
.prose-dark h3 { font-size: 1.25rem; margin-top: 1.5rem; margin-bottom: 0.75rem; }
.prose-dark p { margin-bottom: 1rem; }
.prose-dark a { color: #60a5fa; text-decoration: underline; text-underline-offset: 2px; transition: color 0.2s; }
.prose-dark a:hover { color: #93c5fd; }
.prose-dark ul,.prose-dark ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.prose-dark ul { list-style-type: disc; }
.prose-dark ol { list-style-type: decimal; }
.prose-dark blockquote { border-left: 4px solid #3b82f6; padding-left: 1.5rem; font-style: italic; color: #a1a1aa; margin: 1.5rem 0; }
.prose-dark code { background: #27272a; color: #93c5fd; padding: 0.125rem 0.5rem; border-radius: 0.25rem; font-size: 0.875rem; font-family: monospace; }
.prose-dark pre { background: #27272a; border-radius: 0.75rem; padding: 1.5rem; overflow-x: auto; margin: 1.5rem 0; }
.prose-dark pre code { background: transparent; padding: 0; }
.prose-dark img { border-radius: 0.75rem; width: 100%; }
.prose-dark table { width: 100%; border-collapse: collapse; }
.prose-dark th { background: #27272a; color: #e4e4e7; text-align: left; padding: 0.5rem 1rem; border: 1px solid #3f3f46; }
.prose-dark td { padding: 0.5rem 1rem; border: 1px solid #27272a; color: #a1a1aa; }

/* ============================================================
   ANIMATIONS
============================================================ */
.animate-float-slow  { animation: float 6s ease-in-out infinite; }
.animate-float-medium { animation: float 4s ease-in-out infinite 1s; }
.animate-float-fast  { animation: float 3s ease-in-out infinite 0.5s; }
.animate-spin-slow   { animation: spin 20s linear infinite; }
.animate-spin-reverse-slow { animation: spin 30s linear infinite reverse; }

@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
@keyframes spin   { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes gradient-shift { 0%{background-position:0% center} 50%{background-position:100% center} 100%{background-position:0% center} }
@keyframes skeleton-loading { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ============================================================
   ANIMATE ON SCROLL
============================================================ */
.animate-on-scroll { opacity:0; transform:translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.animate-on-scroll.animated { opacity:1; transform:translateY(0); }

/* ============================================================
   FILTER TABS
============================================================ */
.filter-tab {
  padding: 0.5rem 1rem; border-radius: 9999px; font-size: 0.875rem;
  font-weight: 500; transition: all 0.2s; cursor: pointer;
  background: transparent; color: #71717a; border: 1px solid #3f3f46;
}
.filter-tab:hover { color: #e4e4e7; border-color: #71717a; }
.filter-tab.active {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: #fff; border-color: transparent;
  box-shadow: 0 4px 15px rgba(37,99,235,0.3);
}

/* ============================================================
   SKELETON
============================================================ */
.skeleton {
  background: linear-gradient(90deg, #27272a 25%, #3f3f46 50%, #27272a 75%);
  background-size: 200% 100%; animation: skeleton-loading 1.5s infinite;
}

/* ============================================================
   MASONRY
============================================================ */
@media (min-width:768px)  { .masonry-grid { columns:2; gap:1.5rem; } }
@media (min-width:1024px) { .masonry-grid { columns:3; } }
.masonry-item { break-inside:avoid; margin-bottom:1.5rem; }

/* ============================================================
   LINE CLAMP
============================================================ */
.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* ============================================================
   MAP
============================================================ */
.map-container { border-radius:1rem; overflow:hidden; border:1px solid #27272a; filter:grayscale(100%) invert(95%) brightness(0.8); }

/* ============================================================
   PRINT
============================================================ */
@media print { .no-print{display:none!important;} body{background:#fff;color:#000;} a{color:#000;} }

/* ============================================================
   OVERFLOW / MISC
============================================================ */
.overflow-x-hidden { overflow-x: hidden; }