/* SVL */

.jrkdsvlee {
  position: relative;
  overflow: hidden;
  padding-block: var(--jrkdee-space-5xl);
  background: var(--jrkdee-color-bg);
}

.jrkdsvlee-aura {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.4;
  pointer-events: none;
  background: radial-gradient(circle, var(--jrkdee-color-brand-light), transparent 70%);
  width: 500px;
  height: 500px;
  top: -200px;
  left: -160px;
}

.jrkdsvlee-head {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--jrkdee-space-3xl);
}

.jrkdsvlee-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--jrkdee-color-brand-subtle);
  border: 1px solid var(--jrkdee-color-brand-border);
  color: var(--jrkdee-color-brand);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 7px 16px;
  border-radius: var(--jrkdee-radius-full);
  opacity: 0;
  transform: translateY(14px);
}

.jrkdsvlee.is-visible .jrkdsvlee-badge {
  animation: jrkdsvlee-cascade 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.jrkdsvlee-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--jrkdee-radius-full);
  background: var(--jrkdee-color-brand);
}

.jrkdsvlee-head h2 {
  font-size: var(--jrkdee-font-size-4xl);
  line-height: 1.5;
  margin: var(--jrkdee-space-md) 0;
  opacity: 0;
  transform: translateY(14px);
}

.jrkdsvlee.is-visible .jrkdsvlee-head h2 {
  animation: jrkdsvlee-cascade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.08s;
}

.jrkdsvlee-head p {
  color: var(--jrkdee-color-text-muted);
  font-size: var(--jrkdee-font-size-base);
  line-height: 1.85;
  opacity: 0;
  transform: translateY(14px);
}

.jrkdsvlee.is-visible .jrkdsvlee-head p {
  animation: jrkdsvlee-cascade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.14s;
}

.jrkdsvlee-featured {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--jrkdee-space-lg);
  margin-bottom: var(--jrkdee-space-lg);
}

.jrkdsvlee-fcard {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 240px;
  padding: var(--jrkdee-space-xl);
  background: linear-gradient(155deg, #8a715f 0%, var(--jrkdee-color-brand) 55%, #2c2420 100%);
  clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px);
  color: var(--jrkdee-color-white);
  text-decoration: none;
  box-shadow: 0 20px 46px var(--jrkdee-color-brand-light);
  opacity: 0;
  transform: translateY(18px);
  transition: transform var(--jrkdee-transition-normal), box-shadow var(--jrkdee-transition-normal);
}

.jrkdsvlee.is-visible .jrkdsvlee-fcard {
  animation: jrkdsvlee-cascade 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.jrkdsvlee-fcard:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px var(--jrkdee-color-brand-light);
}

.jrkdsvlee-ftop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--jrkdee-space-lg);
}

.jrkdsvlee-ficon {
  width: 52px;
  height: 52px;
  border-radius: var(--jrkdee-radius-full);
  background: rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
}

.jrkdsvlee-ficon svg {
  width: 24px;
  height: 24px;
  stroke: var(--jrkdee-color-white);
}

.jrkdsvlee-farrow {
  width: 38px;
  height: 38px;
  border-radius: var(--jrkdee-radius-full);
  background: rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--jrkdee-transition-normal), background var(--jrkdee-transition-normal);
}

.jrkdsvlee-farrow svg {
  width: 16px;
  height: 16px;
  stroke: var(--jrkdee-color-white);
}

.jrkdsvlee-fcard:hover .jrkdsvlee-farrow {
  background: var(--jrkdee-color-white);
}

.jrkdsvlee-fcard:hover .jrkdsvlee-farrow svg {
  stroke: var(--jrkdee-color-brand);
  transform: translateX(-3px);
}

.jrkdsvlee-fcard h3 {
  color: var(--jrkdee-color-white);
  font-size: var(--jrkdee-font-size-xl);
  margin-bottom: 10px;
}

.jrkdsvlee-fcard p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  line-height: 1.8;
  margin: 0 0 auto;
}

.jrkdsvlee-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--jrkdee-space-md);
}

.jrkdsvlee-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--jrkdee-space-lg);
  background: var(--jrkdee-color-white);
  border: 1px solid var(--jrkdee-color-border-card);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  text-decoration: none;
  box-shadow: var(--jrkdee-shadow-sm);
  opacity: 0;
  transform: translateY(18px);
  transition: transform var(--jrkdee-transition-normal), box-shadow var(--jrkdee-transition-normal), border-color var(--jrkdee-transition-normal);
}

.jrkdsvlee.is-visible .jrkdsvlee-card {
  animation: jrkdsvlee-cascade 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.jrkdsvlee-card:hover {
  transform: translateY(-5px);
  border-color: var(--jrkdee-color-brand-border);
  box-shadow: var(--jrkdee-shadow-md);
}

.jrkdsvlee-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--jrkdee-space-md);
}

.jrkdsvlee-icon {
  width: 42px;
  height: 42px;
  clip-path: polygon(22% 0, 100% 0, 100% 78%, 78% 100%, 0 100%, 0 22%);
  background: var(--jrkdee-color-brand-subtle);
  color: var(--jrkdee-color-brand);
  display: flex;
  align-items: center;
  justify-content: center;
}

.jrkdsvlee-icon svg {
  width: 20px;
  height: 20px;
}

.jrkdsvlee-arrow {
  width: 30px;
  height: 30px;
  border-radius: var(--jrkdee-radius-full);
  background: var(--jrkdee-color-bg-alt);
  color: var(--jrkdee-color-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--jrkdee-transition-normal), background var(--jrkdee-transition-normal), color var(--jrkdee-transition-normal);
}

.jrkdsvlee-arrow svg {
  width: 14px;
  height: 14px;
}

.jrkdsvlee-card:hover .jrkdsvlee-arrow {
  background: var(--jrkdee-color-brand);
  color: var(--jrkdee-color-white);
  transform: translateX(-3px);
}

.jrkdsvlee-card h3 {
  font-size: 0.98rem;
  color: var(--jrkdee-color-text-dark);
  margin-bottom: 6px;
}

.jrkdsvlee-card p {
  font-size: 0.8125rem;
  line-height: 1.75;
  color: var(--jrkdee-color-text-muted);
  margin: 0;
}

@keyframes jrkdsvlee-cascade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1080px) {
  .jrkdsvlee-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .jrkdsvlee-featured {
    grid-template-columns: 1fr;
  }

  .jrkdsvlee-fcard {
    min-height: 0;
  }

  .jrkdsvlee-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .jrkdsvlee {
    padding-block: var(--jrkdee-space-4xl);
  }

  .jrkdsvlee-head h2 {
    font-size: var(--jrkdee-font-size-2xl);
  }

  .jrkdsvlee-grid {
    grid-template-columns: 1fr;
  }
}