/* Dream Steps — pages/design-ui-ux-design.css
 * Page-specific rules for design/ui-ux-design.html.
 */

.wd-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--warm-line); border-radius: var(--rad-lg); overflow: hidden; box-shadow: var(--shadow-1)
}
@media (max-width: 880px) {
  .wd-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}
.wd-tile {
  background: var(--paper); padding: 40px 32px 36px; transition: background .35s var(--ease); position: relative; min-height: 240px
}
.fj-thumb {
  aspect-ratio: 5 / 3; background: linear-gradient(135deg, var(--warm) 0%, var(--warm-2) 100%); border-bottom: 1px solid var(--warm-line); display: block
}
.design-primitives {
  background: linear-gradient(180deg, #0B0B0E 0%, #15151B 100%); color: #fff; position: relative; overflow: hidden
}
.design-primitives::before {
  content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, rgba(232,67,10,.10) 0%, transparent 50%); pointer-events: none
}
.design-primitives .container {
  position: relative
}
.design-primitives .section-head {
  text-align: center; max-width: 720px; margin: 0 auto 56px
}
.design-primitives .section-head .eyebrow {
  color: var(--orange); justify-content: center
}
.design-primitives .section-head h2 {
  color: #fff; font-size: var(--t-h2); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin: 16px 0 14px; text-wrap: balance
}
.design-primitives .section-head h2 em {
  font-style: normal; color: var(--orange-soft)
}
.design-primitives .section-head p {
  font-size: 17px; line-height: 1.55; color: rgba(255,255,255,.65); margin: 0; max-width: 56ch; margin: 0 auto
}
.dsp-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 920px; margin: 0 auto
}
@media (max-width: 720px) {
  .dsp-grid {
    grid-template-columns: 1fr
  }
}
.dsp-tile {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: var(--rad-md); padding: 28px; transition: border-color .3s var(--ease), background .3s var(--ease); min-width: 0
}
.dsp-tile:hover {
  border-color: rgba(232,67,10,.4); background: rgba(255,255,255,.06)
}
.dsp-tile .dsp-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); margin-bottom: 14px
}
.dsp-tile h3 {
  font-size: 20px; font-weight: 600; letter-spacing: -0.012em; color: #fff; margin: 0 0 10px
}
.dsp-tile p {
  font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.6); margin: 0 0 22px
}
.dsp-tile .dsp-visual {
  background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.06); border-radius: var(--rad-sm); padding: 22px
}
.dsp-tile .dsp-visual svg {
  width: 100%; height: auto; display: block
}