/* categories.css */
:root{
  --bg-deep:#070912;
  --bg-surface:#0d1322;
  --bg-elevated:#121a2e;
  --border-soft:rgba(255,255,255,0.06);
  --border-strong:rgba(255,255,255,0.12);
  --text-primary:#e8ecf4;
  --text-secondary:#9aa3b8;
  --text-muted:#5b647a;
  --accent:#4f7df5;
  --accent-2:#22d3a7;
  --accent-violet:#a78bfa;
  --accent-amber:#f0b341;
  --accent-cyan:#38bdf8;
  --accent-rose:#fb7185;

  --radius-lg:22px;
  --radius-md:14px;
  --radius-sm:10px;

  --font-sans:"Inter",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg-deep);color:var(--text-primary);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}

.linkup-development-categories{
  position:relative;
  overflow:hidden;
  padding:clamp(64px,9vw,140px) clamp(20px,5vw,72px);
  background:
    radial-gradient(1100px 600px at 90% -10%, rgba(79,125,245,.18), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(34,211,167,.14), transparent 60%),
    var(--bg-deep);
  isolation:isolate;
}

.dc-aurora{
  position:absolute; inset:-20%;
  background:
    conic-gradient(from 140deg at 70% 30%, rgba(79,125,245,.18), transparent 30%, rgba(167,139,250,.16) 55%, transparent 75%, rgba(34,211,167,.18) 95%);
  filter:blur(80px);
  opacity:.55;
  z-index:-2;
  animation: dc-spin 40s linear infinite;
}
.dc-noise{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 40%, #000 40%, transparent 80%);
  z-index:-1;
}

.development-categories-container{
  max-width:1280px; margin:0 auto;
  position:relative;
}

/* Header */
.section-header{ margin-bottom:clamp(40px,5vw,72px); max-width:780px }
.dc-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-secondary);
  padding:8px 14px;
  border:1px solid var(--border-soft);
  border-radius:999px;
  background:rgba(255,255,255,.02);
  backdrop-filter:blur(8px);
}
.dc-eyebrow-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--accent-2); box-shadow:0 0 12px var(--accent-2);
  animation:dc-pulse 2.4s ease-in-out infinite;
}
.section-title{
  font-size:clamp(40px,6vw,76px);
  line-height:1.02;
  letter-spacing:-.03em;
  margin:22px 0 18px;
  font-weight:700;
}
.section-title em{
  font-style:normal;
  background:linear-gradient(95deg,var(--accent) 0%, var(--accent-violet) 45%, var(--accent-2) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.dc-lede{
  color:var(--text-secondary);
  font-size:clamp(15px,1.4vw,17px);
  line-height:1.6; max-width:560px; margin:0 0 28px;
}

/* Controls */
.dc-controls{ display:flex; flex-wrap:wrap; gap:10px }
.dc-chip{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.05em;
  color:var(--text-secondary);
  background:rgba(255,255,255,.03);
  border:1px solid var(--border-soft);
  padding:9px 16px;
  border-radius:999px;
  cursor:pointer;
  transition:all .25s ease;
  display:inline-flex; align-items:center; gap:8px;
}
.dc-chip:hover{ color:var(--text-primary); border-color:var(--border-strong); transform:translateY(-1px) }
.dc-chip.is-active{
  color:var(--bg-deep);
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  border-color:transparent;
  box-shadow:0 6px 24px -8px var(--accent);
}
.dc-chip-glyph{ font-size:11px }
.dc-chip-count{
  padding:1px 7px; border-radius:999px;
  background:rgba(0,0,0,.18); font-size:10px;
}

/* Grid — asymmetric editorial bento */
.development-categories-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:18px;
}
.development-category-card{
  grid-column:span 2;
  opacity:0; transform:translateY(24px);
  animation:dc-reveal .7s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay:calc(var(--i) * 80ms);
}
.development-category-card.is-hidden{ display:none }

/* Asymmetric layout — distinguishes this section */
.development-category-card:nth-child(1){ grid-column:span 3 }
.development-category-card:nth-child(2){ grid-column:span 3 }
.development-category-card:nth-child(3){ grid-column:span 2 }
.development-category-card:nth-child(4){ grid-column:span 2 }
.development-category-card:nth-child(5){ grid-column:span 2 }
.development-category-card:nth-child(6){ grid-column:span 6 }

@media (max-width:960px){
  .development-categories-grid{ grid-template-columns:repeat(2,1fr) }
  .development-category-card,
  .development-category-card:nth-child(n){ grid-column:span 1 }
}
@media (max-width:560px){
  .development-categories-grid{ grid-template-columns:1fr }
}

/* Accents per card */
.development-category-card[data-accent="indigo"]{ --c:var(--accent) }
.development-category-card[data-accent="mint"]{ --c:var(--accent-2) }
.development-category-card[data-accent="violet"]{ --c:var(--accent-violet) }
.development-category-card[data-accent="amber"]{ --c:var(--accent-amber) }
.development-category-card[data-accent="cyan"]{ --c:var(--accent-cyan) }
.development-category-card[data-accent="rose"]{ --c:var(--accent-rose) }

.dc-card-frame{
  position:relative;
  height:100%;
  padding:28px 28px 26px;
  border-radius:var(--radius-lg);
  background:
    radial-gradient(420px 220px at var(--mx,50%) var(--my,0%), color-mix(in oklab, var(--c) 18%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0)) ,
    var(--bg-surface);
  border:1px solid var(--border-soft);
  overflow:hidden;
  transition:transform .4s ease, border-color .3s ease, box-shadow .4s ease;
  min-height:240px;
  display:flex; flex-direction:column;
}
.dc-card-frame::before{
  /* gradient corner accent line */
  content:"";
  position:absolute; inset:0;
  border-radius:inherit; padding:1px;
  background:linear-gradient(135deg, color-mix(in oklab,var(--c) 60%,transparent), transparent 40%, color-mix(in oklab,var(--c) 25%,transparent));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.4;
  transition:opacity .3s ease;
  pointer-events:none;
}
.dc-card-frame::after{
  /* diagonal sheen */
  content:"";
  position:absolute; top:-40%; left:-30%;
  width:60%; height:180%;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.06) 50%, transparent 60%);
  transform:translateX(-120%); transition:transform .9s ease;
  pointer-events:none;
}
.development-category-card:hover .dc-card-frame{
  transform:translateY(-6px);
  border-color:color-mix(in oklab, var(--c) 50%, var(--border-strong));
  box-shadow:
    0 24px 60px -28px color-mix(in oklab, var(--c) 60%, transparent),
    0 0 0 1px color-mix(in oklab, var(--c) 25%, transparent);
}
.development-category-card:hover .dc-card-frame::before{ opacity:.9 }
.development-category-card:hover .dc-card-frame::after{ transform:translateX(220%) }

.dc-card-index{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.2em;
  color:var(--text-muted);
}
.dc-card-rune{
  width:46px; height:46px; margin:14px 0 22px;
  color:var(--c);
  display:flex; align-items:center; justify-content:center;
  border-radius:12px;
  background:color-mix(in oklab, var(--c) 12%, transparent);
  border:1px solid color-mix(in oklab, var(--c) 30%, transparent);
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.development-category-card:hover .dc-card-rune{ transform:rotate(-6deg) scale(1.06) }

.development-category-title{
  font-size:clamp(20px,2vw,24px);
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--text-primary);
  margin-bottom:10px;
}
.development-category-description{
  font-size:14.5px; line-height:1.65;
  color:var(--text-secondary);
  flex:1;
}

.dc-card-meta{
  display:flex; flex-wrap:wrap; gap:6px;
  margin-top:20px;
  padding-top:18px;
  border-top:1px dashed var(--border-soft);
}
.dc-tag{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.05em;
  color:color-mix(in oklab, var(--c) 75%, var(--text-secondary));
  padding:4px 9px;
  border-radius:6px;
  background:color-mix(in oklab, var(--c) 8%, transparent);
  border:1px solid color-mix(in oklab, var(--c) 22%, transparent);
}

.dc-card-arrow{
  position:absolute; top:24px; right:24px;
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-muted);
  background:rgba(255,255,255,.03);
  border:1px solid var(--border-soft);
  transition:all .35s ease;
}
.development-category-card:hover .dc-card-arrow{
  color:var(--bg-deep);
  background:var(--c);
  border-color:var(--c);
  transform:rotate(45deg);
}

/* Footnote */
.dc-footnote{
  margin-top:40px;
  font-family:var(--font-mono); font-size:11.5px;
  color:var(--text-muted);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.dc-footnote-key{
  padding:3px 8px; border-radius:5px;
  background:var(--bg-elevated); border:1px solid var(--border-soft);
  color:var(--text-secondary);
}
.dc-footnote-sep{ opacity:.4 }
.dc-footnote-count strong{ color:var(--text-primary); font-weight:600 }

/* Animations */
@keyframes dc-reveal{ to{ opacity:1; transform:translateY(0) } }
@keyframes dc-spin{ to{ transform:rotate(360deg) } }
@keyframes dc-pulse{
  0%,100%{ transform:scale(1); opacity:1 }
  50%{ transform:scale(1.4); opacity:.6 }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important }
  .development-category-card{ opacity:1; transform:none }
}