/* ============================================================
   tutorials.css — Premium Tutorials Hub Page Styles
   PlayerSDK Editorial Design System
   ============================================================ */

/* ── Smooth page entry ── */
@keyframes tut-fade-up {
  from {
    opacity: 0;
    transform: translateY(32px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes tut-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes tut-float-a {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-12px);
  }
}

@keyframes tut-float-b {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(10px);
  }
}

@keyframes tut-float-c {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-8px);
  }
}

@keyframes tut-progress-fill {
  from {
    width: 0%;
  }

  to {
    width: 65%;
  }
}

@keyframes tut-shimmer {
  0% {
    left: -100%;
  }

  100% {
    left: 200%;
  }
}

@keyframes tut-pulse-dot {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(124, 255, 107, 0.4);
  }

  50% {
    box-shadow: 0 0 0 6px rgba(124, 255, 107, 0);
  }
}

@keyframes tut-waveform {

  0%,
  100% {
    height: 6px;
  }

  25% {
    height: 20px;
  }

  50% {
    height: 12px;
  }

  75% {
    height: 18px;
  }
}

@keyframes tut-progress-scan {
  0% {
    width: 0%;
  }

  100% {
    width: 100%;
  }
}


/* ============================================================
   HERO SECTION
   ============================================================ */
.tut-hero {
  position: relative;
  min-height: 100vh;
  padding: 130px 0 80px;
  overflow: hidden;
  background: var(--bg-primary);
  display: flex;
  align-items: center;
}

/* ── Background decorations ── */
.tut-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.tut-hero__bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0;
  animation: tut-fade-in 2s ease-out forwards;
}

.tut-hero__bg-orb--green {
  width: 600px;
  height: 600px;
  top: -100px;
  left: -200px;
  background: radial-gradient(circle, rgba(124, 255, 107, 0.12) 0%, transparent 70%);
  animation-delay: 0.3s;
}

.tut-hero__bg-orb--blue {
  width: 500px;
  height: 500px;
  top: 100px;
  right: -150px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
  animation-delay: 0.5s;
}

.tut-hero__bg-orb--purple {
  width: 400px;
  height: 400px;
  bottom: -50px;
  left: 40%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.07) 0%, transparent 70%);
  animation-delay: 0.7s;
}

.tut-hero__grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
}

/* ── Inner layout ── */
.tut-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

/* ============================================================
   HERO LEFT — Content
   ============================================================ */
.tut-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

/* Badge */
.tut-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 10px;
  background: rgba(124, 255, 107, 0.06);
  border: 1px solid rgba(124, 255, 107, 0.2);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 28px;
  opacity: 0;
  animation: tut-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

.tut-hero__badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: tut-pulse-dot 2s ease-in-out infinite;
}

/* Heading */
.tut-hero__heading {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin-bottom: 22px;
  opacity: 0;
  animation: tut-fade-up 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.35s forwards;
}

.tut-hero__heading-accent {
  background: linear-gradient(90deg, #7cff6b, #34d399);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-theme="light"] .tut-hero__heading-accent {
  background: linear-gradient(90deg, var(--accent), #38bdf8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Subtitle */
.tut-hero__subtitle {
  font-size: 1.05rem;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 520px;
  margin-bottom: 36px;
  opacity: 0;
  animation: tut-fade-up 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
}

/* CTA Buttons */
.tut-hero__ctas {
  display: flex;
  gap: 14px;
  margin-bottom: 40px;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Button variants */
.tut-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 12px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
  white-space: nowrap;
  opacity: 1 !important;
  visibility: visible !important;
}

.tut-btn:hover {
  transform: translateY(-2px) scale(1.02);
}

.tut-btn--primary,
a.tut-btn--primary,
button.tut-btn--primary {
  background: #7cff6b !important;
  color: #000000 !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 20px rgba(124, 255, 107, 0.3);
}

.tut-btn--primary *,
.tut-btn--primary i,
a.tut-btn--primary *,
a.tut-btn--primary i {
  color: #000000 !important;
}

[data-theme="light"] .tut-btn--primary,
[data-theme="light"] a.tut-btn--primary,
[data-theme="light"] button.tut-btn--primary {
  background: #2563eb !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.3);
}

[data-theme="light"] .tut-btn--primary *,
[data-theme="light"] .tut-btn--primary i,
[data-theme="light"] a.tut-btn--primary *,
[data-theme="light"] a.tut-btn--primary i {
  color: #ffffff !important;
}

.tut-btn__shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transform: skewX(-20deg);
  animation: tut-shimmer 3s ease-in-out 2s infinite;
}

.tut-btn--ghost {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  box-shadow: none;
}

/* Stats Row */
.tut-hero__stats {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 36px !important;
  border-top: 1px solid var(--border-color, rgba(255,255,255,0.1)) !important;
  padding-top: 24px !important;
  margin-top: 24px !important;
  width: 100% !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.tut-stat-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  padding: 0 36px 0 0 !important;
  border-right: 1px solid var(--border-color, rgba(255,255,255,0.1)) !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: transparent !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
}

.tut-stat-card:last-child {
  border-right: none !important;
  padding-right: 0 !important;
}

.tut-stat-number {
  font-family: var(--font-display) !important;
  font-size: 1.8rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.1 !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 2px !important;
}

[data-theme="light"] .tut-stat-number {
  color: #0f172a !important;
}

.tut-stat-label {
  font-size: 0.8rem !important;
  color: #94a3b8 !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

[data-theme="light"] .tut-stat-label {
  color: #475569 !important;
}

/* Daily animated counter card */
.tut-stat-card--daily {
  position: relative;
  overflow: hidden;
}

.tut-stat-card--daily::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--accent, #2563eb), rgba(37, 99, 235, 0.3));
  border-radius: 0 0 16px 16px;
  animation: dailyProgress 2.8s linear infinite;
}

[data-theme="light"] .tut-stat-card {
  background-color: #ffffff;
  border-color: #f1f5f9;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .tut-stat-number {
  color: #0f172a;
}

[data-theme="light"] .tut-stat-label {
  color: #64748b;
}

@media (max-width: 768px) {
  .tut-hero__stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}


/* ============================================================
   HERO RIGHT — 3D Mockup Visual
   ============================================================ */
.tut-hero__visual {
  position: relative;
  height: 520px;
  width: 100%;
  max-width: 540px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: tut-fade-in 1s ease-out 0.4s forwards;
}

.tut-mockup {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ── Glow accents ── */
.tut-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

.tut-glow--green {
  width: 280px;
  height: 280px;
  top: 5%;
  left: 5%;
  background: rgba(124, 255, 107, 0.12);
}

.tut-glow--blue {
  width: 320px;
  height: 320px;
  bottom: 5%;
  right: 0%;
  background: rgba(59, 130, 246, 0.1);
}

/* ── Monitor ── */
.tut-mockup__monitor {
  position: absolute;
  top: 15%;
  left: 0%;
  z-index: 4;
  animation: tut-fade-up 1s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both;
}

.tut-mockup__monitor-frame {
  width: 250px;
  background: #0a0e1a;
  border: 3px solid #1e2d45;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 25px 50px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.tut-mockup__chrome {
  height: 28px;
  background: #111827;
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.tut-mockup__chrome-dots {
  display: flex;
  gap: 5px;
}

.chrome-dot {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.chrome-dot--red {
  background: #ff5f57;
}

.chrome-dot--yellow {
  background: #febc2e;
}

.chrome-dot--green {
  background: #28c840;
}

.tut-mockup__chrome-bar {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  color: rgba(255, 255, 255, 0.3);
  padding: 3px 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 200px;
}

.tut-mockup__screen {
  height: 165px;
  background: #060a12;
  display: flex;
  position: relative;
  overflow: hidden;
}

.tut-mockup__sidebar {
  width: 40px;
  background: #090e18;
  border-right: 1px solid rgba(255, 255, 255, 0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;
  gap: 6px;
}

.tut-sidebar__item {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.2);
  cursor: default;
  transition: all 0.2s;
}

.tut-sidebar__item--active {
  background: rgba(124, 255, 107, 0.1);
  color: var(--accent);
  border: 1px solid rgba(124, 255, 107, 0.2);
}

.tut-sidebar__sep {
  width: 20px;
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 2px 0;
}

.tut-mockup__main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.tut-mockup__player-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  gap: 10px;
  padding: 10px;
}

.tut-player__glow {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 255, 107, 0.08) 0%, transparent 70%);
  filter: blur(20px);
}

.tut-player__icon {
  font-size: 2.4rem;
  color: var(--accent);
  filter: drop-shadow(0 0 8px rgba(124, 255, 107, 0.4));
  z-index: 1;
}

.tut-player__bar {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.tut-player__progress {
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}

.tut-player__progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), #4dd9ff);
  border-radius: 2px;
  animation: tut-progress-scan 6s linear 2s infinite;
}

.tut-player__controls {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.35);
}

.tut-player__controls span {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  color: var(--accent);
  background: rgba(124, 255, 107, 0.1);
  padding: 1px 5px;
  border-radius: 3px;
}

/* Monitor stand */
.tut-mockup__stand {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tut-mockup__neck {
  width: 20px;
  height: 18px;
  background: linear-gradient(to bottom, #1e2d45, #162238);
}

.tut-mockup__base {
  width: 80px;
  height: 5px;
  background: #1e2d45;
  border-radius: 3px;
}

/* ── Smart TV ── */
.tut-mockup__tv {
  position: absolute;
  top: 5%;
  right: 2%;
  z-index: 2;
  animation: tut-fade-up 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.75s both;
}

.tut-mockup__tv-frame {
  width: 310px;
  background: #050810;
  border: 5px solid #151c2e;
  border-radius: 8px;
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(255, 255, 255, 0.03);
  transform: rotateY(8deg) rotateX(2deg);
  transform-origin: center center;
}

.tut-mockup__tv-screen {
  height: 170px;
  background: #030508;
  overflow: hidden;
}

.tut-tv__banner {
  padding: 14px 16px 10px;
}

.tut-tv__chip {
  font-family: var(--font-mono);
  font-size: 0.48rem;
  font-weight: 700;
  color: var(--accent);
  background: rgba(124, 255, 107, 0.1);
  border: 1px solid rgba(124, 255, 107, 0.15);
  padding: 2px 6px;
  border-radius: 3px;
  display: inline-block;
  margin-bottom: 6px;
}

.tut-tv__banner h5 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
}

.tut-tv__banner p {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: rgba(255, 255, 255, 0.4);
}

.tut-tv__grid {
  display: flex;
  gap: 8px;
  padding: 0 16px 14px;
}

.tut-tv__thumb {
  flex: 1;
  height: 50px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.tut-tv__thumb--active {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.25);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* ── Tablet ── */
.tut-mockup__tablet {
  position: absolute;
  bottom: 10%;
  left: 5%;
  z-index: 5;
  animation: tut-fade-up 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.9s both;
}

.tut-mockup__tablet-frame {
  width: 125px;
  height: 175px;
  background: #080c18;
  border: 3.5px solid #1a2438;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  transform: rotateY(-8deg) rotateX(5deg);
}

.tut-mockup__tablet-screen {
  width: 100%;
  height: 100%;
  padding: 10px;
}

.tut-tablet__ui {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
}

.tut-tablet__header {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--accent);
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.tut-tablet__step {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.56rem;
  color: rgba(255, 255, 255, 0.3);
}

.tut-tablet__step--done {
  color: var(--accent);
}

.tut-tablet__step--active {
  color: #fff;
}

.tut-tablet__progress {
  height: 3px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 2px;
  margin-top: auto;
  overflow: hidden;
}

.tut-tablet__progress-fill {
  height: 100%;
  width: 65%;
  background: linear-gradient(90deg, var(--accent), #4dd9ff);
  border-radius: 2px;
}

/* ── Phone ── */
.tut-mockup__phone {
  position: absolute;
  bottom: 8%;
  right: 8%;
  z-index: 6;
  animation: tut-fade-up 1.3s cubic-bezier(0.16, 1, 0.3, 1) 1s both;
}

.tut-mockup__phone-frame {
  width: 72px;
  height: 138px;
  background: #07091a;
  border: 3px solid #1a2438;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  position: relative;
  transform: rotateY(10deg) rotateX(-5deg);
}

.tut-mockup__phone-notch {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 5px;
  background: #0b0f1e;
  border-radius: 3px;
  z-index: 2;
}

.tut-mockup__phone-screen {
  width: 100%;
  height: 100%;
  padding: 20px 8px 8px;
}

.tut-phone__ui {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 8px;
}

.tut-phone__status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 0.48rem;
  color: var(--accent);
  background: rgba(124, 255, 107, 0.08);
  border: 1px solid rgba(124, 255, 107, 0.15);
  padding: 3px 6px;
  border-radius: 4px;
}

.tut-phone__app-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, rgba(124, 255, 107, 0.15), rgba(59, 130, 246, 0.15));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--accent);
}

.tut-phone__tag {
  font-family: var(--font-mono);
  font-size: 0.45rem;
  color: rgba(255, 255, 255, 0.3);
}

/* ── Floating Cards ── */
.tut-float-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(8, 12, 24, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    0 15px 35px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  z-index: 10;
  min-width: 175px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tut-float-card:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

.tut-float-card--1 {
  top: 4%;
  left: -2%;
  animation: tut-float-a 4s ease-in-out 1.2s infinite;
}

.tut-float-card--2 {
  top: 44%;
  right: -4%;
  animation: tut-float-b 3.8s ease-in-out 1.5s infinite;
}

.tut-float-card--3 {
  bottom: 4%;
  left: -2%;
  animation: tut-float-c 4.5s ease-in-out 1.8s infinite;
}

.tut-float-card__icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.tut-float-card__icon--blue {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.tut-float-card__icon--green {
  background: rgba(124, 255, 107, 0.12);
  color: var(--accent);
  border: 1px solid rgba(124, 255, 107, 0.2);
}

.tut-float-card__icon--amber {
  background: rgba(251, 191, 36, 0.12);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.2);
}

.tut-float-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.tut-float-card__title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary);
  display: block;
}

.tut-float-card__sub {
  font-size: 0.66rem;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  display: block;
}

.tut-float-card__badge {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 3px;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.tut-float-card__badge--green {
  background: rgba(124, 255, 107, 0.12);
  color: var(--accent);
  border: 1px solid rgba(124, 255, 107, 0.2);
}

.tut-float-card__progress {
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
}

.tut-float-card__progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #4dd9ff);
  border-radius: 2px;
  transition: width 1s ease;
}

.tut-float-card__dot {
  display: block;
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
  animation: tut-pulse-dot 2s ease-in-out infinite;
}



/* ============================================================
   FEATURED TUTORIALS SECTION
   ============================================================ */
.tut-featured {
  position: relative;
  z-index: 10;
  background: var(--bg-primary);
  padding: 100px 0 90px;
  border-bottom: 1px solid var(--border-color);
}

.tut-featured__inner {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 40px;
}

/* Header styling */
.tut-featured__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 48px;
  gap: 30px;
}

.tut-featured__header-left {
  flex: 1;
}

.tut-featured__section-title {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.tut-featured__section-subtitle {
  font-size: 0.98rem;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 600px;
}

.tut-featured__view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  transition: gap 0.25s var(--transition-smooth), color 0.25s ease;
  white-space: nowrap;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
}

.tut-featured__view-all:hover {
  gap: 12px;
  color: var(--accent-hover);
  border-bottom-color: rgba(124, 255, 107, 0.4);
}

.tut-featured__view-all i {
  font-size: 0.85rem;
  transition: transform 0.25s var(--transition-smooth);
}

.tut-featured__view-all:hover i {
  transform: translateX(2px);
}

/* Grid layout */
.tut-featured__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
}

/* LEFT: Large Featured Card */
.tut-featured__large {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--card-shadow);
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s ease,
    box-shadow 0.4s ease;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.tut-featured__large:hover {
  transform: translateY(-4px);
  border-color: rgba(124, 255, 107, 0.25);
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(124, 255, 107, 0.1);
}

/* Large Card Media */
.tut-featured__large-media-wrapper {
  height: 380px;
  background: linear-gradient(135deg, rgba(124, 255, 107, 0.02) 0%, rgba(59, 130, 246, 0.02) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border-color);
  overflow: hidden;
  position: relative;
}

/* ── Smart TV Large Mockup ── */
.tut-mockup-tv-large {
  position: relative;
  width: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.4s var(--transition-smooth);
}

.tut-featured__large:hover .tut-mockup-tv-large {
  transform: scale(1.03) translateY(-4px);
}

.tut-mockup-tv-large__screen {
  width: 100%;
  aspect-ratio: 16/9;
  background: #060911;
  border: 6px solid #1a2436;
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 25px 50px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(255, 255, 255, 0.03);
  position: relative;
}

.tut-tv-large__interface {
  display: flex;
  height: 100%;
  position: relative;
  z-index: 2;
}

/* TV sidebar */
.tut-tv-large__sidebar {
  width: 44px;
  background: #090d18;
  border-right: 1px solid rgba(255, 255, 255, 0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  gap: 8px;
}

.tut-tv-large__logo {
  font-size: 1.05rem;
  color: var(--accent);
  margin-bottom: 10px;
}

.tut-tv-large__nav-item {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.18);
  transition: all 0.2s;
}

.tut-tv-large__nav-item.active {
  background: rgba(124, 255, 107, 0.08);
  color: var(--accent);
  border: 1px solid rgba(124, 255, 107, 0.15);
}

/* TV dashboard main */
.tut-tv-large__main {
  flex: 1;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.tut-tv-large__top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tut-tv-large__time {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: rgba(255, 255, 255, 0.3);
}

.tut-tv-large__status {
  display: flex;
  gap: 6px;
}

.tut-tv-large__status-tag {
  font-family: var(--font-mono);
  font-size: 0.48rem;
  color: rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  gap: 3px;
}

.tut-tv-large__status-tag--accent {
  color: var(--accent);
}

.tut-tv-large__status-tag i {
  font-size: 0.55rem;
}

/* Hero panel streaming active */
.tut-tv-large__hero-panel {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 8px 10px;
  margin-top: 4px;
}

.tut-tv-large__live-badge {
  font-family: var(--font-mono);
  font-size: 0.45rem;
  font-weight: 700;
  color: var(--accent);
  background: rgba(124, 255, 107, 0.08);
  border: 1px solid rgba(124, 255, 107, 0.15);
  padding: 1px 5px;
  border-radius: 3px;
  display: inline-block;
  margin-bottom: 2px;
  letter-spacing: 0.05em;
}

.tut-tv-large__hero-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1px;
}

.tut-tv-large__hero-meta {
  font-size: 0.5rem;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.tut-tv-large__action-row {
  display: flex;
  gap: 5px;
}

.tut-tv-large__button {
  font-size: 0.48rem;
  font-weight: 700;
  padding: 3px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  gap: 3px;
  cursor: default;
}

.tut-tv-large__button.active {
  background: var(--accent);
  color: #06080f;
  border-color: var(--accent);
}

/* Channels thumbnail row */
.tut-tv-large__preview-row {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.tut-tv-large__preview-item {
  flex: 1;
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(255, 255, 255, 0.03);
  border-radius: 4px;
  padding: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.45rem;
  color: rgba(255, 255, 255, 0.3);
}

.tut-tv-large__preview-item.active {
  background: rgba(59, 130, 246, 0.06);
  border-color: rgba(59, 130, 246, 0.25);
  color: #fff;
}

.tut-tv-large__preview-img {
  width: 14px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

.preview-img--1 {
  background: linear-gradient(135deg, #10b981, #059669);
}

.preview-img--2 {
  background: linear-gradient(135deg, #7C3AED, #6D28D9);
}

.preview-img--3 {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
}

/* Decorative glows */
.tut-tv-large__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(25px);
  opacity: 0.08;
  pointer-events: none;
  z-index: 1;
}

.tut-tv-large__glow--mint {
  top: 10%;
  right: 10%;
  width: 100px;
  height: 100px;
  background: var(--accent);
}

.tut-tv-large__glow--blue {
  bottom: 10%;
  left: 20%;
  width: 120px;
  height: 120px;
  background: #3b82f6;
}

/* TV base elements */
.tut-mockup-tv-large__neck {
  width: 22px;
  height: 16px;
  background: linear-gradient(to bottom, #1a2436, #101826);
}

.tut-mockup-tv-large__base {
  width: 100px;
  height: 5px;
  background: #1a2436;
  border-radius: 3px;
}

/* Large Card Content */
.tut-featured__large-content {
  padding: 32px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.tut-featured__large-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.tut-featured__category-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(124, 255, 107, 0.08);
  border: 1px solid rgba(124, 255, 107, 0.2);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tut-featured__category-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: tut-pulse-dot 2s ease-in-out infinite;
}

/* Bookmark Button */
.tut-featured__bookmark-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s var(--transition-smooth);
}

.tut-featured__bookmark-btn:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.15);
  transform: scale(1.05);
}

.tut-featured__bookmark-btn.active {
  background: rgba(124, 255, 107, 0.1);
  color: var(--accent);
  border-color: var(--accent);
}

.tut-featured__bookmark-btn.active i {
  font-weight: bold;
}

/* Title & Description */
.tut-featured__large-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--text-primary);
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}

.tut-featured__large-desc {
  font-size: 0.94rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 28px;
}

/* Footer layout */
.tut-featured__large-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border-color);
  padding-top: 24px;
  margin-top: auto;
  gap: 20px;
}

.tut-featured__author-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tut-featured__author-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent) 0%, #3b82f6 100%);
  color: #06080f;
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tut-featured__author-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tut-featured__author-name {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-primary);
}

.tut-featured__author-meta {
  font-size: 0.74rem;
  color: var(--text-secondary);
  opacity: 0.8;
}

.tut-featured__large-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.tut-featured__read-time {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.tut-featured__read-time i {
  font-size: 0.85rem;
}

.tut-featured__large-btn {
  padding: 10px 20px;
  font-size: 0.88rem;
  border-radius: 10px;
}

.tut-featured__large-btn i {
  transition: transform 0.25s var(--transition-smooth);
}

.tut-featured__large-btn:hover i {
  transform: translateX(3px);
}


/* RIGHT: Medium Card List */
.tut-featured__medium-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.tut-featured__medium-card {
  display: flex;
  gap: 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 20px;
  transition:
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.2s ease,
    box-shadow 0.3s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: relative;
}

.tut-featured__medium-card:hover {
  transform: translateX(4px);
  border-color: rgba(124, 255, 107, 0.2);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

/* Medium Card Thumbnail Image Box */
.tut-featured__medium-img-box {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.tut-featured__medium-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.tut-featured__medium-card:hover .tut-featured__medium-img {
  transform: scale(1.08);
}

/* Medium Card Icons */
.tut-featured__medium-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
}

.icon-box--green {
  background: rgba(124, 255, 107, 0.08);
  border: 1px solid rgba(124, 255, 107, 0.15);
  color: var(--accent);
}

.icon-box--blue {
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

.icon-box--amber {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}

.icon-box--purple {
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.15);
  color: #a78bfa;
}

/* Medium Card Body */
.tut-featured__medium-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.tut-featured__medium-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.tut-featured__medium-cat {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tut-featured__medium-card .tut-featured__bookmark-btn {
  width: 28px;
  height: 28px;
  font-size: 0.75rem;
}

.tut-featured__medium-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-primary);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.tut-featured__medium-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.tut-featured__medium-author {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  color: var(--text-secondary);
}

.avatar-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}

.tut-featured__medium-time {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 3px;
}

.tut-featured__medium-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  transition: gap 0.2s var(--transition-smooth);
}

.tut-featured__medium-link i {
  font-size: 0.75rem;
  transition: transform 0.2s var(--transition-smooth);
}

.tut-featured__medium-card:hover .tut-featured__medium-link {
  gap: 8px;
}

.tut-featured__medium-card:hover .tut-featured__medium-link i {
  transform: translateX(2px);
}



/* ============================================================
   BROWSE BY CATEGORY SECTION
   ============================================================ */
.tut-categories {
  position: relative;
  z-index: 10;
  background: var(--bg-primary);
  padding: 100px 0 90px;
  border-bottom: 1px solid var(--border-color);
}

.tut-categories__inner {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 40px;
}

.tut-categories__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 48px;
  gap: 30px;
}

.tut-categories__header-left {
  flex: 1;
}

.tut-categories__section-title {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.tut-categories__section-subtitle {
  font-size: 0.98rem;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 600px;
}

.tut-categories__view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  transition: gap 0.25s var(--transition-smooth), color 0.25s ease;
  white-space: nowrap;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
}

.tut-categories__view-all:hover {
  gap: 12px;
  color: var(--accent-hover);
  border-bottom-color: rgba(124, 255, 107, 0.4);
}

.tut-categories__view-all i {
  font-size: 0.85rem;
  transition: transform 0.25s var(--transition-smooth);
}

.tut-categories__view-all:hover i {
  transform: translateX(2px);
}

/* Category Grid */
.tut-categories__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* Category Card */
.tut-cat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s ease,
    box-shadow 0.4s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.tut-cat-card:hover {
  transform: translateY(-5px);
  border-color: rgba(124, 255, 107, 0.2);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(124, 255, 107, 0.05);
}

/* Glow Background Effects */
.tut-cat-card__glow {
  position: absolute;
  top: -50px;
  left: -50px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.01;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.tut-cat-card:hover .tut-cat-card__glow {
  opacity: 0.07;
}

.tut-cat-card__glow--green {
  background: var(--accent);
}

.tut-cat-card__glow--blue {
  background: #3b82f6;
}

.tut-cat-card__glow--amber {
  background: #f59e0b;
}

.tut-cat-card__glow--purple {
  background: #8b5cf6;
}

.tut-cat-card__glow--teal {
  background: #14b8a6;
}

.tut-cat-card__glow--pink {
  background: #ec4899;
}

/* Icon Box */
.tut-cat-card__icon-box {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.tut-cat-card:hover .tut-cat-card__icon-box {
  transform: scale(1.08);
}

/* Card Content */
.tut-cat-card__content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tut-cat-card__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.tut-cat-card__desc {
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Card Footer */
.tut-cat-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  padding-top: 16px;
}

.tut-cat-card__badge {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  padding: 4px 10px;
  border-radius: 8px;
  transition: all 0.25s ease;
}

.tut-cat-card:hover .tut-cat-card__badge {
  background: rgba(124, 255, 107, 0.08);
  border-color: rgba(124, 255, 107, 0.2);
  color: var(--accent);
}

.tut-cat-card__arrow-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  transition: all 0.25s var(--transition-smooth);
}

.tut-cat-card__arrow-btn i {
  transition: transform 0.2s ease;
}

.tut-cat-card:hover .tut-cat-card__arrow-btn {
  background: var(--accent);
  border-color: var(--accent);
  color: #06080f;
  transform: scale(1.08);
}

.tut-cat-card:hover .tut-cat-card__arrow-btn i {
  transform: translateX(1px);
}


/* ============================================================
   SEARCH & FILTER BAR
   ============================================================ */
.tut-search-bar {
  position: relative;
  z-index: 20;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  padding: 32px 40px;
}

.tut-search-bar__inner {
  max-width: 1260px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Search Input */
.tut-search-input {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 14px 20px;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

.tut-search-input:focus-within {
  border-color: rgba(124, 255, 107, 0.35);
  box-shadow: 0 0 0 3px rgba(124, 255, 107, 0.06);
  background: rgba(255, 255, 255, 0.03);
}

.tut-search-input__icon {
  color: var(--text-secondary);
  font-size: 1.3rem;
  flex-shrink: 0;
}

.tut-search-input__field {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-primary);
}

.tut-search-input__field::placeholder {
  color: var(--text-secondary);
  opacity: 0.6;
}

.tut-search-input__clear {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: var(--text-secondary);
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.8rem;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.tut-search-input__clear:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

/* Filter Controls Row */
.tut-search-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Filter Chips */
.tut-chips {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.tut-chips::-webkit-scrollbar {
  display: none;
}

.tut-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 100px;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.15s ease;
}

.tut-chip i {
  font-size: 0.85rem;
}

.tut-chip:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px) scale(1.02);
}

.tut-chip--active {
  background: var(--accent);
  color: #06080f;
  border-color: var(--accent);
  font-weight: 700;
}

.tut-chip--active:hover {
  background: var(--accent-hover, #5eff4a);
  border-color: var(--accent-hover, #5eff4a);
  color: #06080f;
  transform: translateY(-1px);
}

/* Sort Dropdown */
.tut-sort-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 0 14px 0 12px;
  position: relative;
  flex-shrink: 0;
  transition: border-color 0.2s;
}

.tut-sort-wrap:hover {
  border-color: rgba(255, 255, 255, 0.12);
}

.tut-sort-wrap__icon {
  color: var(--text-secondary);
  font-size: 0.9rem;
  pointer-events: none;
}

.tut-sort-select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 10px 28px 10px 4px;
  cursor: pointer;
}

.tut-sort-wrap__caret {
  position: absolute;
  right: 10px;
  pointer-events: none;
  color: var(--text-secondary);
  font-size: 0.75rem;
}

/* Meta row */
.tut-search-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
}

.tut-search-meta__count {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--accent);
}

.tut-search-meta__sep {
  color: var(--border-color);
}

.tut-search-meta__sort {
  color: var(--text-secondary);
}


/* ============================================================
   TUTORIALS CATALOG GRID
   ============================================================ */
.tut-catalog {
  padding: 80px 40px 100px;
  background: var(--bg-primary);
}

.tut-catalog__inner {
  max-width: 1260px;
  margin: 0 auto;
}

.tut-catalog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* ── Tutorial Card ── */
.tut-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.25s ease,
    box-shadow 0.35s ease;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.tut-card:hover {
  transform: translateY(-6px);
  border-color: rgba(124, 255, 107, 0.2);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(124, 255, 107, 0.08);
}

/* Card thumbnail area */
.tut-card__thumb {
  height: 180px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Color variants for thumbnail backgrounds */
.tut-card__thumb--fire {
  background: linear-gradient(135deg, rgba(124, 255, 107, 0.06) 0%, rgba(34, 197, 94, 0.04) 100%);
}

.tut-card__thumb--blue {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(99, 102, 241, 0.05) 100%);
}

.tut-card__thumb--purple {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(167, 139, 250, 0.05) 100%);
}

.tut-card__thumb--amber {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(251, 191, 36, 0.05) 100%);
}

.tut-card__thumb--teal {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.08) 0%, rgba(45, 212, 191, 0.05) 100%);
}

.tut-card__thumb--pink {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.08) 0%, rgba(244, 114, 182, 0.05) 100%);
}

.tut-card__thumb--video {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(30, 64, 175, 0.06) 100%);
}

.tut-card__cat-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(6, 8, 15, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  padding: 3px 9px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

/* Glow variant behind icons */
.tut-card__thumb-glow {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.tut-card:hover .tut-card__thumb-glow {
  opacity: 1;
}

.tut-card__thumb-glow {
  background: radial-gradient(circle at 50% 60%, rgba(124, 255, 107, 0.08) 0%, transparent 70%);
}

.tut-card__thumb-glow--blue {
  background: radial-gradient(circle at 50% 60%, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
}

.tut-card__thumb-glow--purple {
  background: radial-gradient(circle at 50% 60%, rgba(139, 92, 246, 0.1) 0%, transparent 70%);
}

.tut-card__thumb-glow--amber {
  background: radial-gradient(circle at 50% 60%, rgba(245, 158, 11, 0.1) 0%, transparent 70%);
}

.tut-card__thumb-glow--teal {
  background: radial-gradient(circle at 50% 60%, rgba(20, 184, 166, 0.1) 0%, transparent 70%);
}

.tut-card__thumb-glow--pink {
  background: radial-gradient(circle at 50% 60%, rgba(236, 72, 153, 0.1) 0%, transparent 70%);
}

/* Icon wrap */
.tut-card__icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(124, 255, 107, 0.08);
  border: 1px solid rgba(124, 255, 107, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--accent);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  z-index: 1;
}

.tut-card__icon-wrap--blue {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

.tut-card__icon-wrap--purple {
  background: rgba(139, 92, 246, 0.1);
  border-color: rgba(139, 92, 246, 0.2);
  color: #a78bfa;
}

.tut-card__icon-wrap--amber {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

.tut-card__icon-wrap--teal {
  background: rgba(20, 184, 166, 0.1);
  border-color: rgba(20, 184, 166, 0.2);
  color: #2dd4bf;
}

.tut-card__icon-wrap--pink {
  background: rgba(236, 72, 153, 0.1);
  border-color: rgba(236, 72, 153, 0.2);
  color: #f472b6;
}

.tut-card:hover .tut-card__icon-wrap {
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* Video play button */
.tut-card__video-play {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.15);
  border: 2px solid rgba(59, 130, 246, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #60a5fa;
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
}

.tut-card:hover .tut-card__video-play {
  background: rgba(59, 130, 246, 0.25);
  border-color: rgba(59, 130, 246, 0.5);
  transform: scale(1.08);
  box-shadow: 0 0 30px rgba(59, 130, 246, 0.3);
}

/* Card body */
.tut-card__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.tut-card__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.tut-card__meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.73rem;
  color: var(--text-secondary);
  font-family: var(--font-mono);
}

.tut-card__meta-item i {
  font-size: 0.75rem;
}

.tut-card__meta-item--green {
  color: var(--accent);
}

.tut-card__meta-item--blue {
  color: #60a5fa;
}

.tut-card__meta-item--amber {
  color: #fbbf24;
}

.tut-card__title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-primary);
  margin-bottom: 10px;
  transition: color 0.2s ease;
}

.tut-card:hover .tut-card__title {
  color: #fff;
}

.tut-card__desc {
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.55;
  flex: 1;
  margin-bottom: 20px;
}

.tut-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  transition: gap 0.2s ease, opacity 0.2s ease;
}

.tut-card__link--blue {
  color: #60a5fa;
}

.tut-card__link--purple {
  color: #a78bfa;
}

.tut-card__link--amber {
  color: #fbbf24;
}

.tut-card__link--teal {
  color: #2dd4bf;
}

.tut-card__link--pink {
  color: #f472b6;
}

.tut-card__link-arrow {
  transition: transform 0.2s ease;
}

.tut-card:hover .tut-card__link {
  gap: 10px;
}

.tut-card:hover .tut-card__link-arrow {
  transform: translateX(3px);
}

/* ── Empty State ── */
.tut-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  gap: 14px;
  text-align: center;
}

.tut-empty__icon {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--text-secondary);
  opacity: 0.5;
}

.tut-empty__title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
}

.tut-empty__desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  max-width: 380px;
}

.tut-empty__reset {
  margin-top: 8px;
  font-size: 0.88rem;
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/* ── Tablet: ≤ 1100px ── */
@media (max-width: 1100px) {
  .tut-hero__inner {
    grid-template-columns: 1fr;
    gap: 50px;
    padding: 0 30px;
  }

  .tut-hero {
    padding: 110px 0 60px;
    min-height: auto;
  }

  .tut-hero__visual {
    height: 440px;
  }

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

  .tut-featured {
    padding: 80px 0 70px;
  }

  .tut-featured__header {
    margin-bottom: 36px;
  }

  .tut-featured__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .tut-categories {
    padding: 80px 0 70px;
  }

  .tut-categories__header {
    margin-bottom: 36px;
  }

  .tut-categories__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

/* ── Mobile: ≤ 768px ── */
@media (max-width: 768px) {
  .tut-hero {
    padding: 100px 0 50px;
  }

  .tut-hero__inner {
    padding: 0 20px;
    gap: 40px;
  }

  .tut-hero__heading {
    font-size: 2.4rem;
  }

  .tut-hero__ctas {
    flex-direction: column;
    width: 100%;
  }

  .tut-btn {
    width: 100%;
    justify-content: center;
  }

  .tut-hero__stats {
    flex-wrap: wrap;
    gap: 20px;
  }

  .tut-stat__divider {
    display: none;
  }

  .tut-stat {
    flex: 0 0 calc(50% - 10px);
  }

  .tut-hero__visual {
    height: 380px;
  }

  /* Scale down mockups */
  .tut-mockup__monitor-frame {
    width: 230px;
  }

  .tut-mockup__tv-frame {
    width: 250px;
  }

  .tut-float-card {
    min-width: 150px;
  }

  .tut-float-card--2 {
    right: -2%;
  }

  .tut-search-bar {
    padding: 24px 20px;
  }

  .tut-search-controls {
    flex-direction: column;
    align-items: flex-start;
  }

  .tut-sort-wrap {
    width: 100%;
  }

  .tut-sort-select {
    flex: 1;
  }

  .tut-catalog {
    padding: 50px 20px 60px;
  }

  .tut-catalog__grid {
    grid-template-columns: 1fr;
  }

  .tut-featured {
    padding: 60px 0 50px;
  }

  .tut-featured__inner {
    padding: 0 20px;
  }

  .tut-featured__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 30px;
  }

  .tut-featured__header-right {
    width: 100%;
  }

  .tut-featured__view-all {
    width: 100%;
    justify-content: flex-start;
  }

  .tut-featured__section-title {
    font-size: 1.8rem;
  }

  .tut-featured__large-title {
    font-size: 1.4rem;
  }

  .tut-featured__large-content {
    padding: 24px;
  }

  .tut-featured__large-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .tut-featured__large-actions {
    width: 100%;
    justify-content: space-between;
  }

  .tut-featured__medium-card {
    padding: 16px;
  }

  .tut-categories {
    padding: 60px 0 50px;
  }

  .tut-categories__inner {
    padding: 0 20px;
  }

  .tut-categories__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 30px;
  }

  .tut-categories__header-right {
    width: 100%;
  }

  .tut-categories__view-all {
    width: 100%;
    justify-content: flex-start;
  }

  .tut-categories__section-title {
    font-size: 1.8rem;
  }

  .tut-categories__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ── Small Mobile: ≤ 480px ── */
@media (max-width: 480px) {
  .tut-hero__heading {
    font-size: 2rem;
  }

  .tut-hero__visual {
    height: 320px;
  }

  .tut-mockup__tv,
  .tut-mockup__phone {
    display: none;
  }

  .tut-float-card--2,
  .tut-float-card--3 {
    display: none;
  }

  .tut-mockup__monitor {
    left: 50%;
    transform: translateX(-50%);
  }

  .tut-mockup__tablet {
    left: auto;
    right: 5%;
    bottom: 5%;
  }

  .tut-float-card--1 {
    top: auto;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    animation: none;
  }

  .tut-mockup-tv-large {
    width: 100%;
  }

  .tut-featured__large-media-wrapper {
    height: 260px;
  }

  .tut-featured__medium-card {
    flex-direction: column;
    gap: 12px;
  }

  .tut-featured__medium-icon-box {
    align-self: flex-start;
  }

  .tut-categories__grid {
    gap: 12px;
  }

  .tut-cat-card {
    padding: 18px;
  }
}

/* ── Light Theme overrides ── */
[data-theme="light"] .tut-hero__grid-lines {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px);
}

[data-theme="light"] .tut-btn--primary {
  color: #ffffff;
}

[data-theme="light"] .tut-btn--primary:hover,
[data-theme="light"] .tut-btn--primary:focus {
  color: #ffffff;
}

[data-theme="light"] .tut-mockup__monitor-frame,
[data-theme="light"] .tut-mockup__tv-frame,
[data-theme="light"] .tut-mockup__tablet-frame,
[data-theme="light"] .tut-mockup__phone-frame {
  border-color: #cbd5e1;
  background: #f8fafc;
}

[data-theme="light"] .tut-card {
  background: rgba(255, 255, 255, 0.8);
}

[data-theme="light"] .tut-float-card {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .tut-sort-select {
  color: #475569;
}

[data-theme="light"] .tut-chip {
  color: #475569;
  border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .tut-featured__large,
[data-theme="light"] .tut-featured__medium-card {
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 15px 35px rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .tut-mockup-tv-large__screen {
  background: #f8fafc;
  border-color: #cbd5e1;
}

[data-theme="light"] .tut-tv-large__sidebar {
  background: #e2e8f0;
  border-right-color: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .tut-tv-large__nav-item {
  color: rgba(15, 23, 42, 0.35);
}

[data-theme="light"] .tut-tv-large__nav-item.active {
  background: rgba(37, 99, 235, 0.08);
  color: var(--accent);
  border-color: rgba(37, 99, 235, 0.15);
}

[data-theme="light"] .tut-tv-large__hero-panel {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .tut-tv-large__hero-title {
  color: #0f172a;
}

[data-theme="light"] .tut-tv-large__button {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.05);
  color: rgba(15, 23, 42, 0.6);
}

[data-theme="light"] .tut-tv-large__button.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

[data-theme="light"] .tut-tv-large__preview-item {
  background: rgba(0, 0, 0, 0.01);
  border-color: rgba(0, 0, 0, 0.03);
  color: rgba(15, 23, 42, 0.4);
}

[data-theme="light"] .tut-tv-large__preview-item.active {
  background: rgba(37, 99, 235, 0.05);
  border-color: rgba(37, 99, 235, 0.25);
  color: #0f172a;
}

[data-theme="light"] .tut-cat-card {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
}

[data-theme="light"] .tut-cat-card:hover {
  border-color: rgba(124, 255, 107, 0.3);
  box-shadow:
    0 20px 40px rgba(15, 23, 42, 0.1),
    0 0 0 1px rgba(124, 255, 107, 0.08);
}

[data-theme="light"] .tut-cat-card__title {
  color: #0f172a;
}

[data-theme="light"] .tut-cat-card__desc {
  color: #475569;
}

[data-theme="light"] .tut-cat-card__badge {
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.1);
  color: #64748b;
}

[data-theme="light"] .tut-cat-card__arrow-btn {
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.1);
  color: #64748b;
}

[data-theme="light"] .tut-cat-card__footer {
  border-top-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .tut-btn--ghost {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.15);
  color: #0f172a;
}

[data-theme="light"] .tut-btn--ghost:hover {
  background: rgba(15, 23, 42, 0.08);
  border-color: rgba(15, 23, 42, 0.25);
  color: #000;
}

[data-theme="light"] .tut-empty__reset {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.15);
  color: #0f172a;
}

[data-theme="light"] .tut-empty__reset:hover {
  background: rgba(15, 23, 42, 0.08);
  border-color: rgba(15, 23, 42, 0.25);
  color: #000;
}


/* ============================================================
   TUTORIALS BY CATEGORY SECTION (EDITORIAL + SIDEBAR)
   ============================================================ */
.dev-tut-cat {
  position: relative;
  z-index: 10;
  background: var(--bg-primary);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  padding: 90px 0 85px;
}

.dev-tut-cat__inner {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 40px;
}

/* Section Header */
.dev-tut-cat__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 40px;
  gap: 32px;
}

.dev-tut-cat__header-left {
  flex: 1;
}

.dev-tut-cat__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(124, 255, 107, 0.08);
  border: 1px solid rgba(124, 255, 107, 0.2);
  padding: 5px 14px;
  border-radius: 100px;
  margin-bottom: 16px;
}

.dev-tut-cat__title {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.dev-tut-cat__subtitle {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-top: 12px;
  max-width: 640px;
}

.dev-tut-cat__header-right {
  flex-shrink: 0;
  padding-bottom: 4px;
}

.dev-tut-cat__view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

.dev-tut-cat__view-all:hover {
  color: var(--accent-hover);
  transform: translateX(4px);
}

/* Controls Bar (Tabs + Search) */
.dev-tut-cat__controls-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 16px;
  margin-bottom: 36px;
}

.dev-tut-cat__tabs-wrap {
  position: relative;
  flex: 1;
  overflow: hidden;
}

.dev-tut-cat__tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE10+ */
  padding-bottom: 4px;
}

.dev-tut-cat__tabs::-webkit-scrollbar {
  display: none;
  /* Safari and Chrome */
}

/* Tab button styling */
.dev-tut-tab {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 100px;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.dev-tut-tab i {
  font-size: 0.95rem;
}

.dev-tut-tab:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.03);
}

.dev-tut-tab.active {
  color: var(--accent);
  background: rgba(124, 255, 107, 0.06);
  border-color: rgba(124, 255, 107, 0.2);
  box-shadow: 0 0 12px rgba(124, 255, 107, 0.05);
}

/* Active tab sliding line */
.dev-tut-tab-line {
  position: absolute;
  bottom: -4px;
  left: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 100px;
  box-shadow: 0 0 8px var(--accent);
  transition: all 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  width: 0;
  pointer-events: none;
}

/* Inline keyword search */
.dev-tut-cat__search {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  border-radius: 100px;
  padding: 0 16px;
  width: 240px;
  transition: all 0.25s ease;
  position: relative;
}

.dev-tut-cat__search:focus-within {
  width: 290px;
  border-color: rgba(124, 255, 107, 0.35);
  background: rgba(124, 255, 107, 0.02);
  box-shadow: 0 0 16px rgba(124, 255, 107, 0.05);
}

.dev-tut-cat__search-icon {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin-right: 8px;
  flex-shrink: 0;
}

.dev-tut-cat__search input {
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.84rem;
  padding: 10px 0;
  width: 100%;
}

.dev-tut-cat__search input::placeholder {
  color: var(--text-secondary);
  opacity: 0.7;
}

.dev-tut-cat__search button {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
  margin-left: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
  flex-shrink: 0;
}

.dev-tut-cat__search button:hover {
  color: #fff;
}

/* Layout (Grid + Sidebar) */
.dev-tut-cat__layout {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.dev-tut-cat__content-area {
  flex: 1;
}

/* Grid layout */
.dev-tut-cat__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Card Styling */
.dev-tut-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.25s ease,
    box-shadow 0.3s ease;
}

.dev-tut-card:hover {
  transform: translateY(-5px);
  border-color: rgba(124, 255, 107, 0.2);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
}

.dev-tut-card__media {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  /* 16:9 Aspect Ratio */
  background: #090c15;
  overflow: hidden;
}

.dev-tut-card__img-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.dev-tut-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.dev-tut-card:hover .dev-tut-card__img {
  transform: scale(1.08);
}

/* Category Badge */
.dev-tut-card__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.2s ease;
}

.dev-tut-card:hover .dev-tut-card__badge {
  transform: scale(1.04);
}

.dev-tut-card__badge--green {
  background: rgba(124, 255, 107, 0.12);
  border-color: rgba(124, 255, 107, 0.25);
  color: var(--accent);
}

.dev-tut-card__badge--blue {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.25);
  color: #60a5fa;
}

.dev-tut-card__badge--purple {
  background: rgba(139, 92, 246, 0.12);
  border-color: rgba(139, 92, 246, 0.25);
  color: #a78bfa;
}

.dev-tut-card__badge--amber {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.25);
  color: #fbbf24;
}

.dev-tut-card__badge--teal {
  background: rgba(20, 184, 166, 0.12);
  border-color: rgba(20, 184, 166, 0.25);
  color: #2dd4bf;
}

.dev-tut-card__badge--pink {
  background: rgba(236, 72, 153, 0.12);
  border-color: rgba(236, 72, 153, 0.25);
  color: #f472b6;
}

/* Bookmark Button */
.dev-tut-card__bookmark {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.dev-tut-card__bookmark:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.08);
}

.dev-tut-card__bookmark.active {
  background: var(--accent);
  color: #06080f;
  border-color: var(--accent);
}

/* Reading Progress Indicator wrapper */
.dev-tut-card__progress-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.06);
  z-index: 2;
  overflow: hidden;
}

.dev-tut-card__progress-bar {
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.dev-tut-card:hover .dev-tut-card__progress-bar {
  width: var(--card-progress, 65%);
}

/* Body content of the card */
.dev-tut-card__body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.dev-tut-card__meta {
  display: flex;
  gap: 12px;
  font-size: 0.76rem;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.dev-tut-card__meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.dev-tut-card__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s ease;
}

.dev-tut-card:hover .dev-tut-card__title {
  color: var(--accent);
}

.dev-tut-card__desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

/* Card footer */
.dev-tut-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
  margin-top: auto;
}

.dev-tut-card__author {
  font-size: 0.8rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.dev-tut-card__link {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: gap 0.2s ease, color 0.2s ease;
}

.dev-tut-card__link i {
  transition: transform 0.2s ease;
}

.dev-tut-card__link:hover {
  color: var(--accent-hover);
  gap: 8px;
}

.dev-tut-card__link:hover i {
  transform: translateX(2px);
}

/* Empty search result state */
.dev-tut-cat__empty {
  text-align: center;
  padding: 60px 40px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.dev-tut-cat__empty-icon {
  font-size: 2.5rem;
  color: var(--text-secondary);
  opacity: 0.5;
}

.dev-tut-cat__empty-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
}

.dev-tut-cat__empty-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  max-width: 320px;
  line-height: 1.5;
}

.dev-tut-cat__empty-btn {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  border: 1px solid var(--border-color);
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dev-tut-cat__empty-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Sticky Sidebar Column */
.dev-tut-sidebar {
  width: 310px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 100px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  scrollbar-width: none;
}

.dev-tut-sidebar::-webkit-scrollbar {
  display: none;
}

/* Sidebar block card style */
.dev-tut-sideblock {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 22px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.dev-tut-sideblock__title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 16px;
}

.dev-tut-sideblock__title i {
  color: var(--accent);
  font-size: 1.1rem;
}

.dev-tut-sideblock__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Trending block item */
.dev-tut-sideblock__item {
  display: flex;
  gap: 12px;
  text-decoration: none;
  align-items: flex-start;
  transition: transform 0.2s ease;
}

.dev-tut-sideblock__item:hover {
  transform: translateX(4px);
}

.dev-tut-sideblock__item-badge {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: rgba(124, 255, 107, 0.08);
  border: 1px solid rgba(124, 255, 107, 0.2);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dev-tut-sideblock__item-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.dev-tut-sideblock__item-title {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.35;
  transition: color 0.2s ease;
}

.dev-tut-sideblock__item:hover .dev-tut-sideblock__item-title {
  color: var(--accent);
}

.dev-tut-sideblock__item-meta {
  font-size: 0.72rem;
  color: var(--text-secondary);
}

/* Popular list links */
.dev-tut-sideblock__item-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  text-decoration: none;
  line-height: 1.4;
  transition: all 0.2s ease;
}

.dev-tut-sideblock__item-link i {
  font-size: 0.7rem;
  color: var(--accent);
  transition: transform 0.2s ease;
}

.dev-tut-sideblock__item-link:hover {
  color: #fff;
}

.dev-tut-sideblock__item-link:hover i {
  transform: translateX(3px);
}

/* Downloads list */
.dev-tut-dl-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dev-tut-dl-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dev-tut-dl-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dev-tut-dl-name {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
}

.dev-tut-dl-version {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  background: rgba(255, 255, 255, 0.05);
  padding: 1px 4px;
  border-radius: 4px;
  color: var(--text-secondary);
  margin-left: 4px;
}

.dev-tut-dl-meta {
  font-size: 0.72rem;
  color: var(--text-secondary);
}

.dev-tut-dl-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.2s ease;
}

.dev-tut-dl-btn:hover {
  background: var(--accent);
  color: #06080f;
  border-color: var(--accent);
  transform: translateY(-1px);
}

/* News List */
.dev-tut-news-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dev-tut-news-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-decoration: none;
}

.dev-tut-news-date {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--accent);
}

.dev-tut-news-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.35;
  transition: color 0.2s ease;
}

.dev-tut-news-item:hover .dev-tut-news-title {
  color: var(--accent);
}

/* Sidebar Newsletter highlights */
.dev-tut-sideblock--highlight {
  background: radial-gradient(circle at 50% 0%, rgba(124, 255, 107, 0.06) 0%, transparent 80%), var(--bg-card);
  border-color: rgba(124, 255, 107, 0.15);
}

.dev-tut-sideblock__desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin-bottom: 14px;
}

.dev-tut-side-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dev-tut-side-input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 10px 12px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.8rem;
  outline: none;
  transition: all 0.2s ease;
}

.dev-tut-side-input:focus {
  border-color: rgba(124, 255, 107, 0.35);
  background: rgba(124, 255, 107, 0.02);
}

.dev-tut-side-btn {
  background: #2563eb;
  color: #ffffff !important;
  border: none;
  border-radius: 10px;
  padding: 10px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dev-tut-side-btn:hover {
  background: #1d4ed8;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.dev-tut-side-note {
  font-size: 0.65rem;
  color: var(--text-secondary);
  opacity: 0.6;
  display: block;
  margin-top: 8px;
}

.dev-tut-side-success {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(124, 255, 107, 0.08);
  border: 1px solid rgba(124, 255, 107, 0.2);
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 10px;
  border-radius: 10px;
  margin-top: 8px;
}

/* Responsive details */
@media (max-width: 1100px) {
  .dev-tut-cat__layout {
    flex-direction: column;
    gap: 32px;
  }

  .dev-tut-sidebar {
    width: 100%;
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    max-height: none;
  }

  .dev-tut-sideblock {
    flex: 1 1 calc(50% - 10px);
    min-width: 260px;
  }
}

@media (max-width: 900px) {
  .dev-tut-cat__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .dev-tut-cat {
    padding: 60px 0;
  }

  .dev-tut-cat__inner {
    padding: 0 20px;
  }

  .dev-tut-cat__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 28px;
  }

  .dev-tut-cat__title {
    font-size: 1.8rem;
  }

  .dev-tut-cat__controls-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .dev-tut-cat__search {
    width: 100%;
  }

  .dev-tut-cat__search:focus-within {
    width: 100%;
  }

  .dev-tut-sideblock {
    flex: 1 1 100%;
  }
}

@media (max-width: 580px) {
  .dev-tut-cat__grid {
    grid-template-columns: 1fr;
  }
}

/* Light Theme Overrides */
[data-theme="light"] .dev-tut-cat {
  background: #f8fafc;
  border-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .dev-tut-cat__title {
  color: #0f172a;
}

[data-theme="light"] .dev-tut-cat__subtitle {
  color: #475569;
}

[data-theme="light"] .dev-tut-tab:hover {
  background: #2563eb !important;
  color: #ffffff !important;
}

[data-theme="light"] .dev-tut-tab.active {
  background: rgba(37, 99, 235, 0.08) !important;
  color: #2563eb !important;
  border-color: rgba(37, 99, 235, 0.4) !important;
}

[data-theme="light"] .dev-tut-tab.active:hover {
  background: #2563eb !important;
  color: #ffffff !important;
}

[data-theme="light"] .dev-tut-cat__search {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.12);
}

[data-theme="light"] .dev-tut-cat__search input {
  color: #0f172a;
}

[data-theme="light"] .dev-tut-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);
}

[data-theme="light"] .dev-tut-card:hover {
  border-color: rgba(124, 255, 107, 0.3);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .dev-tut-card__bookmark {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(15, 23, 42, 0.08);
  color: #475569;
}

[data-theme="light"] .dev-tut-card__bookmark:hover {
  background: #fff;
  color: #0f172a;
}

[data-theme="light"] .dev-tut-card__bookmark.active {
  background: var(--accent);
  color: #06080f;
  border-color: var(--accent);
}

[data-theme="light"] .dev-tut-card__title {
  color: #0f172a;
}

[data-theme="light"] .dev-tut-card__desc {
  color: #475569;
}

[data-theme="light"] .dev-tut-card__footer {
  border-top-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .dev-tut-sideblock {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);
}

[data-theme="light"] .dev-tut-sideblock__title {
  color: #0f172a;
  border-bottom-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .dev-tut-sideblock__item-title {
  color: #0f172a;
}

[data-theme="light"] .dev-tut-sideblock__item-link {
  color: #475569;
}

[data-theme="light"] .dev-tut-sideblock__item-link:hover {
  color: #0f172a;
}

[data-theme="light"] .dev-tut-dl-name {
  color: #0f172a;
}

[data-theme="light"] .dev-tut-dl-version {
  background: rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .dev-tut-dl-btn {
  background: rgba(15, 23, 42, 0.02);
  border-color: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .dev-tut-dl-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #06080f;
}

[data-theme="light"] .dev-tut-news-title {
  color: #0f172a;
}

[data-theme="light"] .dev-tut-sideblock--highlight {
  background: radial-gradient(circle at 50% 0%, rgba(124, 255, 107, 0.05) 0%, transparent 80%), #fff;
  border-color: rgba(124, 255, 107, 0.22);
}

[data-theme="light"] .dev-tut-side-input {
  background: #f8fafc;
  border-color: rgba(15, 23, 42, 0.1);
  color: #0f172a;
}

[data-theme="light"] .dev-tut-side-input:focus {
  background: #fff;
  border-color: rgba(124, 255, 107, 0.4);
}



/* ============================================================
   DEVICE-SPECIFIC TUTORIALS SECTION
   ============================================================ */
.dev-spec {
  position: relative;
  z-index: 10;
  background: var(--bg-primary);
  border-top: 1px solid var(--border-color);
  padding: 95px 0 85px;
  overflow: hidden;
}

.dev-spec__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.dev-spec__bg-orb {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 255, 107, 0.04) 0%, transparent 70%);
  filter: blur(80px);
  top: 10%;
  right: -100px;
}

.dev-spec__inner {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 2;
}

/* Header */
.dev-spec__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 36px;
  gap: 32px;
}

.dev-spec__header-left {
  flex: 1;
}

.dev-spec__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(124, 255, 107, 0.08);
  border: 1px solid rgba(124, 255, 107, 0.2);
  padding: 5px 14px;
  border-radius: 100px;
  margin-bottom: 16px;
}

.dev-spec__title {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.dev-spec__subtitle {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-top: 12px;
  max-width: 680px;
}

.dev-spec__header-right {
  flex-shrink: 0;
  padding-bottom: 4px;
}

.dev-spec__browse-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  transition: all 0.2s ease;
}

.dev-spec__browse-all:hover {
  color: var(--accent-hover);
  transform: translateX(4px);
}

/* Filter chips */
.dev-spec__filter-wrap {
  margin-bottom: 36px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 20px;
}

.dev-spec__chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.dev-spec-chip {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.dev-spec-chip:hover {
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-color);
}

.dev-spec-chip.active {
  color: var(--accent) !important;
  background: rgba(124, 255, 107, 0.08) !important;
  border-color: rgba(124, 255, 107, 0.3) !important;
  box-shadow: 0 0 12px rgba(124, 255, 107, 0.1);
}

.dev-spec-chip.active:hover {
  color: var(--accent) !important;
  background: rgba(124, 255, 107, 0.08) !important;
  border-color: rgba(124, 255, 107, 0.3) !important;
}

/* Device grid */
.dev-spec__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* Device Card Styling */
.dev-spec-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 24px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  height: 100%;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.25s ease,
    box-shadow 0.35s ease;
}

.dev-spec-card:hover {
  transform: translateY(-6px);
  border-color: rgba(124, 255, 107, 0.25);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(124, 255, 107, 0.04);
}

/* Card Glow Effect on Hover */
.dev-spec-card__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 120%, rgba(124, 255, 107, 0.06) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 1;
}

.dev-spec-card:hover .dev-spec-card__glow {
  opacity: 1;
}

/* Card Header */
.dev-spec-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  position: relative;
  z-index: 2;
}

.dev-spec-card__badge {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(124, 255, 107, 0.08);
  border: 1px solid rgba(124, 255, 107, 0.2);
  padding: 4px 10px;
  border-radius: 100px;
  transition: all 0.25s ease;
}

.dev-spec-card:hover .dev-spec-card__badge {
  box-shadow: 0 0 8px rgba(124, 255, 107, 0.2);
  transform: scale(1.03);
}

.dev-spec-card__bookmark {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 1.05rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.dev-spec-card__bookmark:hover {
  color: #fff;
  transform: scale(1.12);
}

.dev-spec-card__bookmark.active {
  color: #fbbf24;
  /* Star gold */
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.4));
}

/* Visual Illustration Area */
.dev-spec-card__visual {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 24px;
  z-index: 2;
}

.dev-spec-card__icon-box {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  color: #fff;
  position: relative;
  z-index: 2;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.dev-spec-card:hover .dev-spec-card__icon-box {
  transform: scale(1.1) rotate(4deg);
}

/* Device platform box colors */
.dev-spec-card__icon-box--android {
  background: linear-gradient(135deg, #3ddc84, #129d57);
  color: #06080f;
}

.dev-spec-card__icon-box--fire {
  background: linear-gradient(135deg, #ff9900, #e47911);
}

.dev-spec-card__icon-box--google {
  background: linear-gradient(135deg, #4285f4, #ea4335);
}

.dev-spec-card__icon-box--apple {
  background: linear-gradient(135deg, #8e8e93, #1c1c1e);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.dev-spec-card__icon-box--samsung {
  background: linear-gradient(135deg, #1428a0, #0a1450);
}

.dev-spec-card__icon-box--lg {
  background: linear-gradient(135deg, #a50034, #6e0022);
}

.dev-spec-card__icon-box--desktop {
  background: linear-gradient(135deg, #7c3aed, #4c1d95);
}

.dev-spec-card__icon-box--mobile {
  background: linear-gradient(135deg, #0ea5e9, #0369a1);
}

/* Stylized Device Background Mockup Lines */
.dev-spec-card__device-mockup {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: rgba(255, 255, 255, 0.01);
  pointer-events: none;
  z-index: 1;
  transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0.7;
}

.dev-spec-card:hover .dev-spec-card__device-mockup {
  opacity: 1;
  border-color: rgba(124, 255, 107, 0.15);
}

/* Specific mockup line silhouettes */
.dev-spec-card__device-mockup--tv {
  width: 90px;
  height: 52px;
  border-radius: 6px;
}

.dev-spec-card:hover .dev-spec-card__device-mockup--tv {
  transform: scale(1.08) translateY(-3px);
  box-shadow: 0 0 15px rgba(124, 255, 107, 0.05);
}

.dev-spec-card__device-mockup--stick {
  width: 32px;
  height: 64px;
  border-radius: 4px;
  transform: rotate(-15deg);
}

.dev-spec-card:hover .dev-spec-card__device-mockup--stick {
  transform: scale(1.08) rotate(-5deg) translateY(-3px);
}

.dev-spec-card__device-mockup--chromecast {
  width: 52px;
  height: 52px;
  border-radius: 50%;
}

.dev-spec-card:hover .dev-spec-card__device-mockup--chromecast {
  transform: scale(1.08) translateY(-3px);
}

.dev-spec-card__device-mockup--box {
  width: 60px;
  height: 22px;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.01), rgba(0, 0, 0, 0.5));
}

.dev-spec-card:hover .dev-spec-card__device-mockup--box {
  transform: scale(1.08) translateY(-2px);
}

.dev-spec-card__device-mockup--tv-tizen {
  width: 92px;
  height: 53px;
  border-radius: 4px;
  border-bottom-width: 3px;
}

.dev-spec-card:hover .dev-spec-card__device-mockup--tv-tizen {
  transform: scale(1.06) translateY(-2px);
}

.dev-spec-card__device-mockup--tv-webos {
  width: 94px;
  height: 54px;
  border-radius: 4px;
}

.dev-spec-card:hover .dev-spec-card__device-mockup--tv-webos {
  transform: scale(1.06) translateY(-2px);
}

.dev-spec-card__device-mockup--laptop {
  width: 82px;
  height: 48px;
  border-radius: 4px;
  border-bottom: 3px solid rgba(255, 255, 255, 0.08);
}

.dev-spec-card:hover .dev-spec-card__device-mockup--laptop {
  transform: scale(1.06) translateY(-3px);
  border-bottom-color: var(--accent);
}

.dev-spec-card__device-mockup--mobile {
  width: 38px;
  height: 70px;
  border-radius: 8px;
}

.dev-spec-card:hover .dev-spec-card__device-mockup--mobile {
  transform: scale(1.08) translateY(-4px) rotate(-4deg);
}

/* Card Body */
.dev-spec-card__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.dev-spec-card__name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
  line-height: 1.25;
  transition: color 0.2s ease;
}

.dev-spec-card:hover .dev-spec-card__name {
  color: var(--accent);
}

.dev-spec-card__desc {
  font-size: 0.86rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 24px;
  flex: 1;
}

/* Card Action Button */
.dev-spec-card__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  padding: 11px 18px;
  border-radius: 12px;
  margin-top: auto;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.dev-spec-card__btn i {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  font-size: 0.9rem;
}

.dev-spec-card:hover .dev-spec-card__btn,
.dev-spec-card__btn:hover {
  background: var(--accent) !important;
  color: #06080f !important;
  border-color: var(--accent) !important;
  box-shadow: 0 8px 24px rgba(124, 255, 107, 0.25);
}

.dev-spec-card:hover .dev-spec-card__btn span,
.dev-spec-card:hover .dev-spec-card__btn i,
.dev-spec-card__btn:hover span,
.dev-spec-card__btn:hover i {
  color: #06080f !important;
}

.dev-spec-card:hover .dev-spec-card__btn i {
  transform: translateX(4px);
}

/* Responsive breakdowns */
@media (max-width: 1100px) {
  .dev-spec__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .dev-spec {
    padding: 60px 0;
  }

  .dev-spec__inner {
    padding: 0 20px;
  }

  .dev-spec__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 28px;
  }

  .dev-spec__title {
    font-size: 1.8rem;
  }
}

@media (max-width: 520px) {
  .dev-spec__grid {
    grid-template-columns: 1fr;
  }
}

/* Light Theme Overrides */
[data-theme="light"] .dev-spec {
  background: #fff;
  border-top-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .dev-spec__title {
  color: #0f172a;
}

[data-theme="light"] .dev-spec__subtitle {
  color: #475569;
}

[data-theme="light"] .dev-spec-chip {
  background: #f1f5f9 !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  color: #334155 !important;
}

[data-theme="light"] .dev-spec-chip:hover {
  background: #f1f5f9 !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  color: #334155 !important;
}

[data-theme="light"] .dev-spec-chip.active {
  background: #ecfdf5 !important;
  color: #2563eb !important;
  border-color: rgba(37, 99, 235, 0.3) !important;
}

[data-theme="light"] .dev-spec-chip.active:hover {
  background: #ecfdf5 !important;
  color: #2563eb !important;
  border-color: rgba(37, 99, 235, 0.3) !important;
}

[data-theme="light"] .dev-spec-card {
  background: #f8fafc;
  border-color: rgba(15, 23, 42, 0.06);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.02);
}

[data-theme="light"] .dev-spec-card:hover {
  background: #fff;
  border-color: rgba(124, 255, 107, 0.3);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .dev-spec-card__name {
  color: #0f172a;
}

[data-theme="light"] .dev-spec-card__desc {
  color: #475569;
}

[data-theme="light"] .dev-spec-card__bookmark {
  color: #64748b;
}

[data-theme="light"] .dev-spec-card__bookmark:hover {
  color: #0f172a;
}

[data-theme="light"] .dev-spec-card__bookmark.active {
  color: #fbbf24;
}

[data-theme="light"] .dev-spec-card__btn {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.08);
  color: #0f172a;
}

[data-theme="light"] .dev-spec-card:hover .dev-spec-card__btn {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}



/* ============================================================
   MOST POPULAR TUTORIALS SECTION
   ============================================================ */
.dev-pop-tuts {
  position: relative;
  z-index: 10;
  background: var(--bg-primary);
  border-top: 1px solid var(--border-color);
  padding: 95px 0 85px;
}

.dev-pop-tuts__inner {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 40px;
}

/* Header */
.dev-pop-tuts__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 40px;
  gap: 32px;
}

.dev-pop-tuts__header-left {
  flex: 1;
}

.dev-pop-tuts__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(124, 255, 107, 0.08);
  border: 1px solid rgba(124, 255, 107, 0.2);
  padding: 5px 14px;
  border-radius: 100px;
  margin-bottom: 16px;
}

.dev-pop-tuts__title {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.dev-pop-tuts__subtitle {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-top: 12px;
  max-width: 680px;
}

.dev-pop-tuts__header-right {
  flex-shrink: 0;
  padding-bottom: 4px;
}

.dev-pop-tuts__view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

.dev-pop-tuts__view-all:hover {
  color: var(--accent-hover);
  transform: translateX(4px);
}

/* Layout Split */
.dev-pop-tuts__layout {
  display: flex;
  gap: 32px;
  align-items: stretch;
}

.dev-pop-tuts__featured-area {
  width: 58%;
  flex-shrink: 0;
}

.dev-pop-tuts__grid-area {
  width: 42%;
  flex-grow: 1;
}

/* Featured Large Card */
.dev-pop-feat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 24px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.25s ease,
    box-shadow 0.35s ease;
}

.dev-pop-feat-card:hover {
  transform: translateY(-5px);
  border-color: rgba(124, 255, 107, 0.25);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

.dev-pop-feat-card__media {
  position: relative;
  width: 100%;
  padding-top: 60%;
  background: #090c15;
  overflow: hidden;
}

.dev-pop-feat-card__img-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.dev-pop-feat-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.dev-pop-feat-card:hover .dev-pop-feat-card__img {
  transform: scale(1.06);
}

.dev-pop-feat-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(9, 12, 21, 0) 40%, rgba(9, 12, 21, 0.85) 100%);
}

.dev-pop-feat-card__media-header {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dev-pop-feat-card__badge {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #f87171;
  padding: 5px 12px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  gap: 5px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.dev-pop-feat-card__actions {
  display: flex;
  gap: 8px;
}

.dev-pop-feat-card__action-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.dev-pop-feat-card__action-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.08);
}

.dev-pop-feat-card__action-btn--bookmark.active {
  background: var(--accent);
  color: #06080f;
  border-color: var(--accent);
}

.dev-pop-feat-card__body {
  padding: 28px 30px 30px 30px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.dev-pop-feat-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 18px;
}

.dev-pop-feat-card__meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dev-pop-feat-card__meta-item i {
  font-size: 0.85rem;
}

.dev-pop-feat-card__meta-item--views {
  color: var(--accent);
  font-weight: 600;
}

.dev-pop-feat-card__title {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.35;
  margin-bottom: 14px;
  transition: color 0.2s ease;
}

.dev-pop-feat-card:hover .dev-pop-feat-card__title {
  color: var(--accent);
}

.dev-pop-feat-card__desc {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 24px;
  flex: 1;
}

.dev-pop-feat-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--accent);
  color: #06080f;
  border: none;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  width: fit-content;
  margin-top: auto;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.dev-pop-feat-card__btn:hover {
  background: var(--accent-hover);
  box-shadow: 0 8px 24px rgba(124, 255, 107, 0.25);
  transform: translateY(-1px);
}

.dev-pop-feat-card__btn i {
  transition: transform 0.25s ease;
}

.dev-pop-feat-card__btn:hover i {
  transform: translateX(4px);
}

/* 2-Column Popular Cards Grid */
.dev-pop-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.dev-pop-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.25s ease,
    box-shadow 0.3s ease;
}

.dev-pop-card:hover {
  transform: translateY(-5px);
  border-color: rgba(124, 255, 107, 0.2);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.dev-pop-card__media {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  /* 16:9 */
  background: #090c15;
  overflow: hidden;
}

.dev-pop-card__img-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.dev-pop-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.dev-pop-card:hover .dev-pop-card__img {
  transform: scale(1.06);
}

.dev-pop-card__header-overlay {
  position: absolute;
  inset: 0;
  padding: 14px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  z-index: 2;
  background: linear-gradient(to bottom, rgba(9, 12, 21, 0.4) 0%, transparent 50%);
}

.dev-pop-card__category {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.dev-pop-card__actions {
  display: flex;
  gap: 6px;
}

.dev-pop-card__action-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.dev-pop-card__action-btn i {
  font-size: 0.8rem;
}

.dev-pop-card__action-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.08);
}

.dev-pop-card__action-btn--bookmark.active {
  background: var(--accent);
  color: #06080f;
  border-color: var(--accent);
}

.dev-pop-card__body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.dev-pop-card__meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.dev-pop-card__views {
  color: var(--accent);
  font-weight: 600;
}

.dev-pop-card__title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
  margin-bottom: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
  transition: color 0.2s ease;
}

.dev-pop-card:hover .dev-pop-card__title {
  color: var(--accent);
}

.dev-pop-card__link {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  transition: all 0.2s ease;
}

.dev-pop-card__link i {
  transition: transform 0.2s ease;
}

.dev-pop-card__link:hover {
  color: var(--accent-hover);
  gap: 6px;
}

.dev-pop-card__link:hover i {
  transform: translateX(2px);
}

/* Trending Tags Cloud styling */
.dev-pop-tags-wrap {
  margin-top: 48px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-top: 1px solid var(--border-color);
  padding-top: 24px;
}

.dev-pop-tags-label {
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.dev-pop-tags-label i {
  color: var(--accent);
}

.dev-pop-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dev-pop-tag {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.dev-pop-tag:hover {
  color: var(--accent);
  background: rgba(124, 255, 107, 0.04);
  border-color: rgba(124, 255, 107, 0.25);
  box-shadow: 0 0 10px rgba(124, 255, 107, 0.04);
  transform: translateY(-1px);
}

/* Responsive details */
@media (max-width: 1100px) {
  .dev-pop-tuts__layout {
    flex-direction: column;
    gap: 24px;
  }

  .dev-pop-tuts__featured-area {
    width: 100%;
  }

  .dev-pop-tuts__grid-area {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .dev-pop-tuts {
    padding: 60px 0;
  }

  .dev-pop-tuts__inner {
    padding: 0 20px;
  }

  .dev-pop-tuts__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 28px;
  }

  .dev-pop-tuts__title {
    font-size: 1.8rem;
  }

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

  .dev-pop-tags-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

@media (max-width: 580px) {
  .dev-pop-grid {
    grid-template-columns: 1fr;
  }
}

/* Light Theme Overrides */
[data-theme="light"] .dev-pop-tuts {
  background: #f8fafc;
  border-top-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .dev-pop-tuts__title {
  color: #0f172a;
}

[data-theme="light"] .dev-pop-tuts__subtitle {
  color: #475569;
}

[data-theme="light"] .dev-pop-feat-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.06);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.02);
}

[data-theme="light"] .dev-pop-feat-card:hover {
  border-color: rgba(124, 255, 107, 0.3);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .dev-pop-feat-card__title {
  color: #0f172a;
}

[data-theme="light"] .dev-pop-feat-card__desc {
  color: #475569;
}

[data-theme="light"] .dev-pop-feat-card__btn {
  background: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.25);
}

[data-theme="light"] .dev-pop-feat-card__btn,
[data-theme="light"] .dev-pop-feat-card__btn *,
[data-theme="light"] .dev-pop-feat-card__btn i {
  color: #ffffff !important;
}

[data-theme="light"] .dev-pop-feat-card__btn:hover {
  background: #1d4ed8 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.35);
}

[data-theme="light"] .dev-pop-feat-card__action-btn {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(15, 23, 42, 0.08);
  color: #475569;
}

[data-theme="light"] .dev-pop-feat-card__action-btn:hover {
  background: #fff;
  color: #0f172a;
}

[data-theme="light"] .dev-pop-feat-card__action-btn--bookmark.active {
  background: var(--accent);
  color: #06080f;
  border-color: var(--accent);
}

[data-theme="light"] .dev-pop-feat-card__overlay {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.8) 100%);
}

[data-theme="light"] .dev-pop-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.06);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.02);
}

[data-theme="light"] .dev-pop-card:hover {
  border-color: rgba(124, 255, 107, 0.3);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .dev-pop-card__title {
  color: #0f172a;
}

[data-theme="light"] .dev-pop-card__action-btn {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(15, 23, 42, 0.08);
  color: #475569;
}

[data-theme="light"] .dev-pop-card__action-btn:hover {
  background: #fff;
  color: #0f172a;
}

[data-theme="light"] .dev-pop-card__action-btn--bookmark.active {
  background: var(--accent);
  color: #06080f;
  border-color: var(--accent);
}

[data-theme="light"] .dev-pop-tags-label {
  color: #0f172a;
}

[data-theme="light"] .dev-pop-tags-wrap {
  border-top-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .dev-pop-tag {
  background: #f1f5f9;
  border-color: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .dev-pop-tag:hover {
  background: rgba(124, 255, 107, 0.04);
  color: #15803d;
  border-color: rgba(124, 255, 107, 0.4);
}



/* ============================================================
   VIDEO TUTORIALS SECTION
   ============================================================ */
.vid-tuts {
  position: relative;
  z-index: 10;
  background: var(--bg-primary);
  border-top: 1px solid var(--border-color);
  padding: 95px 0 85px;
  overflow: hidden;
}

/* Decorative Background */
.vid-tuts__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.vid-tuts__bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}

.vid-tuts__bg-orb--1 {
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(124, 255, 107, 0.05) 0%, transparent 70%);
  top: -5%;
  left: -80px;
}

.vid-tuts__bg-orb--2 {
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.04) 0%, transparent 70%);
  bottom: 10%;
  right: -60px;
}

.vid-tuts__bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
}

.vid-tuts__inner {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 2;
}

/* Section Header */
.vid-tuts__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 36px;
  gap: 32px;
}

.vid-tuts__header-left {
  flex: 1;
}

.vid-tuts__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(124, 255, 107, 0.08);
  border: 1px solid rgba(124, 255, 107, 0.2);
  padding: 5px 14px;
  border-radius: 100px;
  margin-bottom: 16px;
}

.vid-tuts__title {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.vid-tuts__subtitle {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-top: 12px;
  max-width: 640px;
}

.vid-tuts__header-right {
  flex-shrink: 0;
  padding-bottom: 4px;
}

.vid-tuts__view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  transition: all 0.2s ease;
}

.vid-tuts__view-all:hover {
  color: var(--accent-hover, #5eff4a);
  transform: translateX(4px);
}

/* Filter Bar */
.vid-tuts__filter-bar {
  margin-bottom: 36px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 20px;
}

.vid-tuts__chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.vid-chip {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 100px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.vid-chip i {
  font-size: 0.9rem;
}

.vid-chip:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.15);
}

.vid-chip.active {
  color: var(--accent);
  background: rgba(124, 255, 107, 0.06);
  border-color: rgba(124, 255, 107, 0.25);
  box-shadow: 0 0 12px rgba(124, 255, 107, 0.06);
}

/* ---- Featured Video Card ---- */
.vid-tuts__featured {
  margin-bottom: 28px;
}

.vid-feat-card {
  display: flex;
  gap: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 24px;
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.25s ease,
    box-shadow 0.35s ease;
}

.vid-feat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(124, 255, 107, 0.22);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
}

/* Left: Thumbnail/Media */
.vid-feat-card__media {
  position: relative;
  width: 56%;
  flex-shrink: 0;
  background: #06080f;
  overflow: hidden;
}

.vid-feat-card__img-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.vid-feat-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.vid-feat-card:hover .vid-feat-card__img {
  transform: scale(1.06);
}

.vid-feat-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(9, 12, 21, 0.55) 0%, rgba(9, 12, 21, 0.25) 60%, rgba(9, 12, 21, 0) 100%);
}

/* Play Button */
.vid-feat-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(124, 255, 107, 0.18);
  border: 2px solid rgba(124, 255, 107, 0.4);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.vid-feat-card__play-icon {
  font-size: 1.6rem;
  margin-left: 4px;
  transition: transform 0.25s ease;
}

.vid-feat-card:hover .vid-feat-card__play {
  background: var(--accent);
  color: #06080f;
  border-color: var(--accent);
  box-shadow: 0 0 30px rgba(124, 255, 107, 0.35);
  transform: translate(-50%, -50%) scale(1.08);
}

.vid-feat-card:hover .vid-feat-card__play-icon {
  transform: scale(1.1);
}

/* Pulse rings */
.vid-feat-card__play-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(124, 255, 107, 0.25);
  animation: vidRingPulse 2.4s ease-out infinite;
}

.vid-feat-card__play-ring--2 {
  inset: -14px;
  border-color: rgba(124, 255, 107, 0.12);
  animation-delay: 0.8s;
}

@keyframes vidRingPulse {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1.45);
  }
}

/* Top row in media (badge + actions) */
.vid-feat-card__top-row {
  position: absolute;
  top: 18px;
  left: 18px;
  right: 18px;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.vid-feat-card__badge {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(124, 255, 107, 0.12);
  border: 1px solid rgba(124, 255, 107, 0.25);
  color: var(--accent);
  padding: 4px 10px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  gap: 5px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.vid-feat-card__actions {
  display: flex;
  gap: 8px;
}

.vid-feat-card__action-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(9, 12, 21, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 0.85rem;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.vid-feat-card__action-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.08);
}

.vid-feat-card__action-btn--bookmark.active {
  background: var(--accent);
  color: #06080f;
  border-color: var(--accent);
}

.vid-feat-card__action-btn--later.active {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
  border-color: rgba(59, 130, 246, 0.35);
}

/* Duration pill (bottom left of media) */
.vid-feat-card__duration {
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: 4;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(9, 12, 21, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 3px 8px;
  border-radius: 6px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Right: Body Content */
.vid-feat-card__body {
  flex: 1;
  padding: 30px;
  display: flex;
  flex-direction: column;
}

.vid-feat-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 0.76rem;
  color: var(--text-secondary);
  margin-bottom: 16px;
  align-items: center;
}

.vid-feat-card__views {
  color: var(--accent);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
}

.vid-feat-card__meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.vid-feat-card__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 12px;
  transition: color 0.2s ease;
}

.vid-feat-card:hover .vid-feat-card__title {
  color: var(--accent);
}

.vid-feat-card__desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 28px;
  flex: 1;
}

.vid-feat-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--accent);
  color: #06080f;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  padding: 13px 24px;
  border-radius: 12px;
  width: fit-content;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.vid-feat-card__btn-arrow {
  transition: transform 0.25s ease;
}

.vid-feat-card__btn:hover {
  background: var(--accent-hover, #5eff4a);
  box-shadow: 0 8px 28px rgba(124, 255, 107, 0.28);
  transform: translateY(-1px);
}

.vid-feat-card__btn:hover .vid-feat-card__btn-arrow {
  transform: translateX(4px);
}

/* ---- Video Cards Grid ---- */
.vid-tuts__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.vid-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.25s ease,
    box-shadow 0.3s ease;
}

.vid-card:hover {
  transform: translateY(-5px);
  border-color: rgba(124, 255, 107, 0.2);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
}

.vid-card__media {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: #06080f;
  overflow: hidden;
}

.vid-card__img-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.vid-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.vid-card:hover .vid-card__img {
  transform: scale(1.07);
}

.vid-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(9, 12, 21, 0.3) 0%, rgba(9, 12, 21, 0.55) 100%);
  transition: opacity 0.3s ease;
}

.vid-card:hover .vid-card__overlay {
  opacity: 0.7;
}

/* Play button on grid cards */
.vid-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(9, 12, 21, 0.55);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  padding-left: 3px;
  cursor: pointer;
  z-index: 3;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.vid-card:hover .vid-card__play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  background: var(--accent);
  border-color: var(--accent);
  color: #06080f;
  box-shadow: 0 0 24px rgba(124, 255, 107, 0.3);
}

/* Top row: action buttons in grid cards */
.vid-card__top-row {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
}

.vid-card__actions {
  display: flex;
  gap: 6px;
}

.vid-card__action-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(9, 12, 21, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.75rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(-4px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.vid-card:hover .vid-card__action-btn {
  opacity: 1;
  transform: translateY(0);
}

.vid-card__action-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}

.vid-card__action-btn--bookmark.active {
  background: var(--accent);
  color: #06080f;
  border-color: var(--accent);
  opacity: 1;
}

.vid-card__action-btn--later.active {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
  border-color: rgba(59, 130, 246, 0.35);
  opacity: 1;
}

/* Duration pill on grid cards */
.vid-card__duration {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 4;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(9, 12, 21, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2px 6px;
  border-radius: 5px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  gap: 3px;
}

/* Grid Card Body */
.vid-card__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.vid-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 0.72rem;
}

.vid-card__views {
  color: var(--accent);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
}

.vid-card__category-tag {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  padding: 2px 7px;
  border-radius: 4px;
}

.vid-card__title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
  margin-bottom: 14px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s ease;
}

.vid-card:hover .vid-card__title {
  color: var(--accent);
}

.vid-card__link {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: auto;
  transition: all 0.2s ease;
}

.vid-card__link:hover {
  gap: 8px;
  color: var(--accent-hover, #5eff4a);
}

.vid-card__link i {
  transition: transform 0.2s ease;
}

.vid-card__link:hover i {
  transform: translateX(2px);
}

/* Watch Later Toast */
.vid-tuts__watch-later-toast {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: rgba(6, 8, 15, 0.92);
  border: 1px solid var(--accent);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 12px;
  z-index: 9999;
  box-shadow: 0 8px 32px rgba(124, 255, 107, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .vid-tuts__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 860px) {
  .vid-feat-card {
    flex-direction: column;
  }

  .vid-feat-card__media {
    width: 100%;
    padding-top: 50%;
    flex-shrink: 0;
  }

  .vid-feat-card__body {
    padding: 24px;
  }
}

@media (max-width: 768px) {
  .vid-tuts {
    padding: 60px 0;
  }

  .vid-tuts__inner {
    padding: 0 20px;
  }

  .vid-tuts__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 28px;
  }

  .vid-tuts__title {
    font-size: 1.8rem;
  }
}

@media (max-width: 560px) {
  .vid-tuts__grid {
    grid-template-columns: 1fr;
  }
}

/* Light Theme Overrides */
[data-theme="light"] .vid-tuts {
  background: #f8fafc;
  border-top-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .vid-tuts__bg-grid {
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.025) 1px, transparent 1px);
}

[data-theme="light"] .vid-tuts__title {
  color: #0f172a;
}

[data-theme="light"] .vid-tuts__subtitle {
  color: #475569;
}

[data-theme="light"] .vid-chip {
  background: #f1f5f9;
  border-color: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .vid-chip:hover {
  background: rgba(15, 23, 42, 0.04);
  color: #0f172a;
}

[data-theme="light"] .vid-chip.active {
  background: rgba(124, 255, 107, 0.04);
  color: #15803d;
  border-color: rgba(124, 255, 107, 0.4);
}

[data-theme="light"] .vid-feat-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .vid-feat-card:hover {
  border-color: rgba(124, 255, 107, 0.3);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .vid-feat-card__overlay {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 100%);
}

[data-theme="light"] .vid-feat-card__title {
  color: #0f172a;
}

[data-theme="light"] .vid-feat-card__desc {
  color: #475569;
}

[data-theme="light"] .vid-feat-card__action-btn {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(15, 23, 42, 0.1);
  color: #64748b;
}

[data-theme="light"] .vid-feat-card__action-btn:hover {
  background: #fff;
  color: #0f172a;
}

[data-theme="light"] .vid-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);
}

[data-theme="light"] .vid-card:hover {
  border-color: rgba(124, 255, 107, 0.3);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .vid-card__title {
  color: #0f172a;
}

[data-theme="light"] .vid-card__category-tag {
  background: #f1f5f9;
  border-color: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .vid-card__action-btn {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(15, 23, 42, 0.1);
  color: #64748b;
}

[data-theme="light"] .vid-card__action-btn:hover {
  background: #fff;
  color: #0f172a;
}



/* ============================================================
   BEGINNER LEARNING PATH SECTION
   ============================================================ */
.lp-sec {
  position: relative;
  z-index: 10;
  background: var(--bg-primary);
  border-top: 1px solid var(--border-color);
  padding: 95px 0 85px;
  overflow: hidden;
}

.lp-sec__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.lp-sec__bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}

.lp-sec__bg-orb--1 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(124, 255, 107, 0.04) 0%, transparent 70%);
  bottom: -80px;
  left: -100px;
}

.lp-sec__bg-orb--2 {
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.04) 0%, transparent 70%);
  top: 5%;
  right: -60px;
}

.lp-sec__inner {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 2;
}

/* Header */
.lp-sec__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 56px;
  gap: 32px;
}

.lp-sec__header-left {
  flex: 1;
}

.lp-sec__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(124, 255, 107, 0.08);
  border: 1px solid rgba(124, 255, 107, 0.2);
  padding: 5px 14px;
  border-radius: 100px;
  margin-bottom: 16px;
}

.lp-sec__title {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.lp-sec__subtitle {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-top: 12px;
  max-width: 660px;
}

.lp-sec__header-right {
  flex-shrink: 0;
  padding-bottom: 4px;
}

.lp-sec__view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  transition: all 0.2s ease;
}

.lp-sec__view-all i {
  transition: transform 0.2s ease;
}

.lp-sec__view-all:hover {
  color: var(--accent-hover, #5eff4a);
}

.lp-sec__view-all:hover i {
  transform: translateX(4px);
}

/* Main Layout */
.lp-sec__layout {
  display: flex;
  gap: 48px;
  align-items: flex-start;
}

/* Timeline Column */
.lp-sec__timeline-wrap {
  flex: 1;
  position: relative;
  padding-left: 28px;
}

/* Connector Line */
.lp-timeline-line {
  position: absolute;
  left: 28px;
  top: 24px;
  bottom: 24px;
  width: 2px;
}

.lp-timeline-line__track {
  position: absolute;
  inset: 0;
  background: var(--border-color);
  border-radius: 2px;
}

.lp-timeline-line__fill {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0%;
  background: linear-gradient(to bottom, var(--accent), rgba(124, 255, 107, 0.3));
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(124, 255, 107, 0.25);
  transition: height 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Individual Step */
.lp-step {
  display: flex;
  gap: 24px;
  margin-bottom: 28px;
  position: relative;
}

.lp-step--last {
  margin-bottom: 0;
}

/* Node (circle) */
.lp-step__node {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  position: relative;
  margin-left: -52px;
  z-index: 2;
}

.lp-step__node-inner {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.lp-step__node-inner--advanced {
  background: linear-gradient(135deg, rgba(124, 255, 107, 0.12), rgba(139, 92, 246, 0.08));
  border-color: rgba(124, 255, 107, 0.3);
}

.lp-step__node-num {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-secondary);
  transition: all 0.25s ease;
}

.lp-step__node-check {
  display: none;
  font-size: 1.1rem;
  color: #06080f;
}

/* Completed state */
.lp-step.completed .lp-step__node-inner {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 16px rgba(124, 255, 107, 0.3);
}

.lp-step.completed .lp-step__node-num {
  display: none;
}

.lp-step.completed .lp-step__node-check {
  display: block;
}

/* Active state (current step expanding) */
.lp-step.active .lp-step__node-inner {
  background: rgba(124, 255, 107, 0.1);
  border-color: var(--accent);
  box-shadow: 0 0 20px rgba(124, 255, 107, 0.2);
}

.lp-step.active .lp-step__node-num {
  color: var(--accent);
}

/* Pulse ring on node */
.lp-step__node-pulse {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid rgba(124, 255, 107, 0.2);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.lp-step.active .lp-step__node-pulse {
  opacity: 1;
  animation: lpNodePulse 2.2s ease-out infinite;
}

@keyframes lpNodePulse {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }

  100% {
    transform: scale(1.55);
    opacity: 0;
  }
}

/* Step Card */
.lp-step__card {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  outline: none;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.25s ease,
    box-shadow 0.3s ease;
}

.lp-step__card:hover,
.lp-step__card:focus-visible {
  transform: translateX(4px);
  border-color: rgba(124, 255, 107, 0.2);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
}

.lp-step.completed .lp-step__card {
  border-color: rgba(124, 255, 107, 0.15);
  background: linear-gradient(135deg, rgba(124, 255, 107, 0.03) 0%, var(--bg-card) 100%);
}

.lp-step.active .lp-step__card {
  border-color: rgba(124, 255, 107, 0.25);
  box-shadow: 0 0 24px rgba(124, 255, 107, 0.06);
}

/* Card Header Row */
.lp-step__card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 22px;
}

.lp-step__card-left {
  flex: 1;
}

.lp-step__level {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 100px;
  margin-bottom: 8px;
  border: 1px solid;
}

.lp-step__level--beginner {
  background: rgba(124, 255, 107, 0.08);
  border-color: rgba(124, 255, 107, 0.2);
  color: var(--accent);
}

.lp-step__level--intermediate {
  background: rgba(251, 191, 36, 0.08);
  border-color: rgba(251, 191, 36, 0.22);
  color: #fbbf24;
}

.lp-step__level--advanced {
  background: rgba(167, 139, 250, 0.08);
  border-color: rgba(167, 139, 250, 0.22);
  color: #a78bfa;
}

.lp-step__title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 6px;
  transition: color 0.2s ease;
}

.lp-step__card:hover .lp-step__title {
  color: var(--accent);
}

.lp-step.completed .lp-step__title {
  color: var(--accent);
}

.lp-step__desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.lp-step__card-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex-shrink: 0;
}

.lp-step__time {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
}

.lp-step__toggle {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
}

.lp-step__toggle i {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.lp-step__card[aria-expanded="true"] .lp-step__toggle {
  background: rgba(124, 255, 107, 0.06);
  border-color: rgba(124, 255, 107, 0.2);
  color: var(--accent);
}

.lp-step__card[aria-expanded="true"] .lp-step__toggle i {
  transform: rotate(180deg);
}

/* Card Body (collapsible) */
.lp-step__card-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.lp-step__card-body.open {
  max-height: 240px;
}

.lp-step__details {
  padding: 0 22px 18px;
  border-top: 1px solid var(--border-color);
  padding-top: 18px;
}

.lp-step__details-text {
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 14px;
}

.lp-step__detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lp-step__detail-tag {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
}

.lp-step__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 22px 20px;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  transition: all 0.2s ease;
}

.lp-step__cta i:last-child {
  transition: transform 0.2s ease;
}

.lp-step__cta:hover {
  color: var(--accent-hover, #5eff4a);
}

.lp-step__cta:hover i:last-child {
  transform: translateX(4px);
}

/* Final step golden CTA */
.lp-step__cta--gold {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(167, 139, 250, 0.08));
  border: 1px solid rgba(251, 191, 36, 0.25);
  padding: 9px 16px;
  border-radius: 10px;
  color: #fbbf24;
}

.lp-step__cta--gold:hover {
  color: #fcd34d;
  border-color: rgba(251, 191, 36, 0.4);
  box-shadow: 0 4px 16px rgba(251, 191, 36, 0.12);
}

/* ---- Progress Panel ---- */
.lp-progress-panel {
  width: 300px;
  flex-shrink: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 24px;
  padding: 28px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: sticky;
  top: 100px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  scrollbar-width: none;
  overflow: visible;
}

.lp-progress-panel::-webkit-scrollbar {
  display: none;
}

.lp-progress-panel__glow {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: radial-gradient(circle at 50% 0%, rgba(124, 255, 107, 0.06) 0%, transparent 65%);
  pointer-events: none;
}

.lp-progress-panel__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
}

.lp-progress-panel__header-icon {
  font-size: 1.2rem;
  color: var(--accent);
}

.lp-progress-panel__title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
}

/* SVG Ring Progress */
.lp-progress-ring-wrap {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 24px;
}

.lp-progress-ring {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.lp-progress-ring__track {
  fill: none;
  stroke: var(--border-color);
  stroke-width: 8;
}

.lp-progress-ring__fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 8;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(124, 255, 107, 0.4));
  transition: stroke-dashoffset 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.lp-progress-ring__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.lp-progress-ring__pct {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

.lp-progress-ring__label {
  font-size: 0.65rem;
  color: var(--text-secondary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Stats grid */
.lp-progress-panel__stats {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 22px;
}

.lp-progress-panel__stat {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 10px 12px;
}

.lp-progress-panel__stat-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
  line-height: 1;
}

.lp-progress-panel__stat-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.lp-progress-panel__stat-value {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
}

.lp-progress-panel__stat-label {
  font-size: 0.7rem;
  color: var(--text-secondary);
}

/* Tracker dots */
.lp-progress-panel__tracker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 20px;
}

.lp-progress-panel__tracker-label {
  font-size: 0.72rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.lp-progress-panel__tracker-dots {
  display: flex;
  gap: 6px;
}

.lp-tracker-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border-color);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1.5px solid transparent;
}

.lp-tracker-dot.done {
  background: var(--accent);
  border-color: rgba(124, 255, 107, 0.4);
  box-shadow: 0 0 8px rgba(124, 255, 107, 0.3);
}

.lp-progress-panel__tracker-count {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}

/* Panel CTA button */
.lp-progress-panel__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--accent);
  color: #06080f;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 12px;
  border-radius: 12px;
  width: 100%;
  margin-bottom: 12px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.lp-progress-panel__cta:hover {
  background: var(--accent-hover, #5eff4a);
  box-shadow: 0 8px 24px rgba(124, 255, 107, 0.25);
  transform: translateY(-1px);
}

.lp-progress-panel__cta i:last-child {
  transition: transform 0.2s ease;
}

.lp-progress-panel__cta:hover i:last-child {
  transform: translateX(4px);
}

/* Reset button */
.lp-progress-panel__reset {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 auto;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.lp-progress-panel__reset:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
}

/* Responsive */
@media (max-width: 1100px) {
  .lp-sec__layout {
    flex-direction: column;
    gap: 32px;
  }

  .lp-progress-panel {
    width: 100%;
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .lp-progress-panel__glow {
    display: none;
  }

  .lp-progress-panel__header {
    grid-column: 1/-1;
  }

  .lp-progress-ring-wrap {
    margin: 0;
  }
}

@media (max-width: 768px) {
  .lp-sec {
    padding: 60px 0;
  }

  .lp-sec__inner {
    padding: 0 20px;
  }

  .lp-sec__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 36px;
  }

  .lp-sec__title {
    font-size: 1.8rem;
  }

  .lp-sec__timeline-wrap {
    padding-left: 22px;
  }

  .lp-step__card-header {
    flex-direction: column;
    gap: 10px;
  }

  .lp-step__card-right {
    flex-direction: row;
    align-items: center;
  }

  .lp-progress-panel {
    grid-template-columns: 1fr;
  }
}

/* Light Theme */
[data-theme="light"] .lp-sec {
  background: #f8fafc;
  border-top-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .lp-sec__title {
  color: #0f172a;
}

[data-theme="light"] .lp-sec__subtitle {
  color: #475569;
}

[data-theme="light"] .lp-step__node-inner {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .lp-step__card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .lp-step__card:hover {
  border-color: rgba(124, 255, 107, 0.3);
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .lp-step__title {
  color: #0f172a;
}

[data-theme="light"] .lp-step__desc {
  color: #475569;
}

[data-theme="light"] .lp-step__toggle {
  background: #f1f5f9;
  border-color: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .lp-step__details {
  border-top-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .lp-step__details-text {
  color: #475569;
}

[data-theme="light"] .lp-step__detail-tag {
  background: #f1f5f9;
  border-color: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .lp-progress-panel {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
}

[data-theme="light"] .lp-progress-panel__title {
  color: #0f172a;
}

[data-theme="light"] .lp-progress-panel__header {
  border-bottom-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .lp-progress-panel__stat {
  background: #f8fafc;
  border-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .lp-progress-panel__stat-value {
  color: #0f172a;
}

[data-theme="light"] .lp-progress-ring__track {
  stroke: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .lp-progress-panel__tracker-label {
  color: #64748b;
}

[data-theme="light"] .lp-tracker-dot {
  background: rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .lp-progress-panel__reset:hover {
  background: rgba(15, 23, 42, 0.03);
  color: #0f172a;
}

[data-theme="light"] .lp-progress-ring__pct {
  color: #0f172a;
}


/* ============================================================
   EXPERT TIPS & RESOURCES SECTION
   ============================================================ */
.exp-res {
  position: relative;
  z-index: 10;
  background: var(--bg-primary);
  border-top: 1px solid var(--border-color);
  padding: 95px 0 85px;
  overflow: hidden;
}

/* Decorative Background */
.exp-res__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.exp-res__bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}

.exp-res__bg-orb--1 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(124, 255, 107, 0.045) 0%, transparent 70%);
  top: -60px;
  right: -80px;
}

.exp-res__bg-orb--2 {
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.04) 0%, transparent 70%);
  bottom: 40px;
  left: -60px;
}

.exp-res__bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.011) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.011) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 85% 80% at 50% 50%, black 35%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 85% 80% at 50% 50%, black 35%, transparent 100%);
}

.exp-res__inner {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 2;
}

/* ── Section Header ── */
.exp-res__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 48px;
  gap: 32px;
}

.exp-res__header-left {
  flex: 1;
}

.exp-res__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #10b981;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
  padding: 5px 14px;
  border-radius: 100px;
  margin-bottom: 16px;
}

.exp-res__title {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--text-primary, #fff);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.exp-res__subtitle {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-top: 12px;
  max-width: 660px;
}

.exp-res__header-right {
  flex-shrink: 0;
  padding-bottom: 4px;
}

.exp-res__view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  color: #10b981;
  text-decoration: none;
  transition: all 0.2s ease;
}

.exp-res__view-all i {
  transition: transform 0.2s ease;
}

.exp-res__view-all:hover {
  color: #34d399;
}

.exp-res__view-all:hover i {
  transform: translateX(4px);
}

/* ── Featured Row ── */
.exp-res__featured-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

/* Featured Card */
.exp-feat-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.25s ease,
    box-shadow 0.35s ease;
}

.exp-feat-card:hover {
  transform: translateY(-5px);
  border-color: rgba(124, 255, 107, 0.22);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.38);
}

.exp-feat-card--alt:hover {
  border-color: rgba(59, 130, 246, 0.22);
  box-shadow: 0 18px 50px rgba(59, 130, 246, 0.08);
}

/* Image */
.exp-feat-card__img-wrap {
  position: relative;
  width: 100%;
  padding-top: 46%;
  overflow: hidden;
  flex-shrink: 0;
}

.exp-feat-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.exp-feat-card:hover .exp-feat-card__img {
  transform: scale(1.06);
}

.exp-feat-card__img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(6, 8, 15, 0.3) 0%, rgba(6, 8, 15, 0.6) 100%);
}

/* Badge + actions overlaid on image */
.exp-feat-card__top-row {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.exp-feat-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid;
}

.exp-feat-card__badge--blue {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.3);
  color: var(--accent, #10b981);
}

.exp-feat-card__badge--green {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.3);
  color: var(--accent, #10b981);
}

.exp-feat-card__actions {
  display: flex;
  gap: 6px;
}

.exp-feat-card__action-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(9, 12, 21, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.8rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.exp-feat-card__action-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.08);
}

.exp-feat-card__action-btn--bookmark.active {
  background: var(--accent);
  color: #06080f;
  border-color: var(--accent);
}

.exp-feat-card__action-btn--later.active {
  background: rgba(16, 185, 129, 0.2);
  color: var(--accent, #10b981);
  border-color: rgba(16, 185, 129, 0.35);
}

/* Body */
.exp-feat-card__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.exp-feat-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 0.74rem;
  color: var(--text-secondary);
}

.exp-feat-card__meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.exp-feat-card__meta-item--star {
  color: var(--accent);
  font-weight: 700;
}

.exp-feat-card__title {
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.35;
  margin-bottom: 10px;
  transition: color 0.2s ease;
}

.exp-feat-card:hover .exp-feat-card__title {
  color: var(--accent);
}

.exp-feat-card__desc {
  font-size: 0.86rem;
  color: var(--text-secondary);
  line-height: 1.55;
  flex: 1;
  margin-bottom: 22px;
}

.exp-feat-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--accent, #10b981);
  color: #06080f !important;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 11px 22px;
  border-radius: 12px;
  width: fit-content;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1.5px solid var(--accent, #10b981);
}

.exp-feat-card__btn-arrow {
  transition: transform 0.2s ease;
}

.exp-feat-card__btn:hover {
  background: #059669;
  border-color: #059669;
  color: #06080f !important;
  box-shadow: 0 8px 26px rgba(16, 185, 129, 0.35);
  transform: translateY(-1px);
}

.exp-feat-card__btn:hover .exp-feat-card__btn-arrow {
  transform: translateX(4px);
}

/* Outline variant for View Settings button */
.exp-feat-card__btn--outline {
  background: transparent !important;
  color: var(--accent, #10b981) !important;
  border: 1.5px solid var(--accent, #10b981) !important;
  box-shadow: none !important;
}

.exp-feat-card__btn--outline:hover {
  background: rgba(16, 185, 129, 0.15) !important;
  color: var(--accent, #10b981) !important;
  border-color: var(--accent, #10b981) !important;
  box-shadow: 0 8px 26px rgba(16, 185, 129, 0.25) !important;
}

.exp-feat-card__btn--outline:hover {
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: #2563eb !important;
  box-shadow: 0 8px 26px rgba(37, 99, 235, 0.35) !important;
}

[data-theme="dark"] .exp-feat-card__btn--outline {
  background: transparent !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
}

[data-theme="dark"] .exp-feat-card__btn--outline:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
}

/* ── Resource Card Grid ── */
.exp-res__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 24px;
}

.exp-res-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.25s ease,
    box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}

.exp-res-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124, 255, 107, 0.3), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.exp-res-card:hover {
  transform: translateY(-5px);
  border-color: rgba(124, 255, 107, 0.2);
  box-shadow: 0 12px 38px rgba(0, 0, 0, 0.32);
}

.exp-res-card:hover::before {
  opacity: 1;
}

/* Icon Wrap */
.exp-res-card__icon-wrap {
  position: relative;
  width: 48px;
  height: 48px;
}

.exp-res-card__icon {
  font-size: 1.5rem;
  color: var(--accent);
  position: relative;
  z-index: 2;
  line-height: 48px;
}

.exp-res-card__icon--yellow {
  color: #fbbf24;
}

.exp-res-card__icon--purple {
  color: #a78bfa;
}

.exp-res-card__icon-glow {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: rgba(124, 255, 107, 0.08);
  filter: blur(6px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.exp-res-card:hover .exp-res-card__icon-glow {
  opacity: 1;
}

.exp-res-card__icon-glow--yellow {
  background: rgba(251, 191, 36, 0.08);
}

.exp-res-card__icon-glow--purple {
  background: rgba(167, 139, 250, 0.08);
}

/* Body */
.exp-res-card__body {
  flex: 1;
}

.exp-res-card__type-tag {
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(124, 255, 107, 0.07);
  border: 1px solid rgba(124, 255, 107, 0.18);
  color: var(--accent);
  margin-bottom: 9px;
}

.exp-res-card__type-tag--yellow {
  background: rgba(251, 191, 36, 0.07);
  border-color: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}

.exp-res-card__type-tag--purple {
  background: rgba(167, 139, 250, 0.07);
  border-color: rgba(167, 139, 250, 0.2);
  color: #a78bfa;
}

.exp-res-card__title {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.35;
  margin-bottom: 7px;
  transition: color 0.2s ease;
}

.exp-res-card:hover .exp-res-card__title {
  color: var(--accent);
}

.exp-res-card__desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Footer */
.exp-res-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
}

.exp-res-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  padding: 6px 14px;
  border: 1px solid rgba(124, 255, 107, 0.2);
  border-radius: 8px;
  background: rgba(124, 255, 107, 0.04);
  transition: all 0.25s ease;
}

.exp-res-card__cta:hover {
  background: rgba(124, 255, 107, 0.1);
  border-color: rgba(124, 255, 107, 0.35);
  box-shadow: 0 4px 14px rgba(124, 255, 107, 0.1);
}

.exp-res-card__cta--filled {
  background: var(--accent, #10b981) !important;
  color: #06080f !important;
  border-color: var(--accent, #10b981) !important;
}

.exp-res-card__cta--filled:hover {
  background: #059669 !important;
  color: #06080f !important;
  border-color: #059669 !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
}

.exp-res-card__cta i {
  transition: transform 0.2s ease;
}

.exp-res-card__cta:hover i {
  transform: translateX(2px) translateY(1px);
}

.exp-res-card__action-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.78rem;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.exp-res-card__action-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.15);
  transform: scale(1.1);
}

.exp-res-card__action-btn--bookmark.active {
  background: var(--accent);
  color: #06080f;
  border-color: var(--accent);
}

/* ── Downloads Panel ── */
.exp-dl-panel {
  background: linear-gradient(135deg, rgba(124, 255, 107, 0.04) 0%, var(--bg-card) 60%);
  border: 1px solid rgba(124, 255, 107, 0.14);
  border-radius: 24px;
  padding: 28px 32px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
}

.exp-dl-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124, 255, 107, 0.35), transparent);
}

.exp-dl-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
}

.exp-dl-panel__header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.exp-dl-panel__header-icon {
  font-size: 1.6rem;
  color: var(--accent);
}

.exp-dl-panel__title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}

.exp-dl-panel__subtitle {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 3px;
}

.exp-dl-panel__badge {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
  background: rgba(124, 255, 107, 0.07);
  border: 1px solid rgba(124, 255, 107, 0.2);
  color: var(--accent);
}

.exp-dl-panel__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

/* Download Card */
.exp-dl-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 14px 16px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.exp-dl-card:hover {
  background: rgba(124, 255, 107, 0.04);
  border-color: rgba(124, 255, 107, 0.18);
  transform: translateX(3px);
}

.exp-dl-card__left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.exp-dl-card__file-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(124, 255, 107, 0.08);
  border: 1px solid rgba(124, 255, 107, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--accent);
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.exp-dl-card:hover .exp-dl-card__file-icon {
  background: rgba(124, 255, 107, 0.12);
  box-shadow: 0 0 12px rgba(124, 255, 107, 0.15);
}

.exp-dl-card__file-icon--blue {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

.exp-dl-card:hover .exp-dl-card__file-icon--blue {
  background: rgba(59, 130, 246, 0.12);
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.15);
}

.exp-dl-card__file-icon--purple {
  background: rgba(167, 139, 250, 0.08);
  border-color: rgba(167, 139, 250, 0.15);
  color: #a78bfa;
}

.exp-dl-card:hover .exp-dl-card__file-icon--purple {
  background: rgba(167, 139, 250, 0.12);
  box-shadow: 0 0 12px rgba(167, 139, 250, 0.15);
}

.exp-dl-card__file-icon--yellow {
  background: rgba(251, 191, 36, 0.08);
  border-color: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}

.exp-dl-card:hover .exp-dl-card__file-icon--yellow {
  background: rgba(251, 191, 36, 0.12);
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.15);
}

.exp-dl-card__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.exp-dl-card__name {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.exp-dl-card__meta {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-secondary);
  letter-spacing: 0.03em;
}

.exp-dl-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  background: rgba(124, 255, 107, 0.06);
  border: 1px solid rgba(124, 255, 107, 0.18);
  padding: 7px 14px;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.exp-dl-card__btn:hover {
  background: rgba(124, 255, 107, 0.12);
  border-color: rgba(124, 255, 107, 0.35);
  box-shadow: 0 4px 14px rgba(124, 255, 107, 0.1);
}

.exp-dl-card__btn-icon {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.exp-dl-card__btn:hover .exp-dl-card__btn-icon {
  transform: translateY(2px);
  animation: dlBounce 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dlBounce {
  0% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(4px);
  }

  70% {
    transform: translateY(-2px);
  }

  100% {
    transform: translateY(0);
  }
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .exp-res__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 860px) {
  .exp-res__featured-row {
    grid-template-columns: 1fr;
  }

  .exp-dl-panel__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .exp-res {
    padding: 60px 0;
  }

  .exp-res__inner {
    padding: 0 20px;
  }

  .exp-res__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 32px;
  }

  .exp-res__title {
    font-size: 1.8rem;
  }

  .exp-dl-panel {
    padding: 22px 20px;
  }

  .exp-dl-panel__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

@media (max-width: 560px) {
  .exp-res__grid {
    grid-template-columns: 1fr;
  }

  .exp-dl-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .exp-dl-card__btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── Light Theme ── */
[data-theme="light"] .exp-res {
  background: #f8fafc;
  border-top-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .exp-res__bg-grid {
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.02) 1px, transparent 1px);
}

[data-theme="light"] .exp-res__title {
  color: #0f172a;
}

[data-theme="light"] .exp-res__subtitle {
  color: #475569;
}

[data-theme="light"] .exp-feat-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .exp-feat-card:hover {
  border-color: rgba(124, 255, 107, 0.3);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .exp-feat-card__img-overlay {
  background: linear-gradient(to bottom, rgba(248, 250, 252, 0.1) 0%, rgba(248, 250, 252, 0.35) 100%);
}

[data-theme="light"] .exp-feat-card__badge--blue {
  background: rgba(37, 99, 235, 0.15) !important;
  border-color: rgba(37, 99, 235, 0.3) !important;
  color: #2563eb !important;
}

[data-theme="light"] .exp-feat-card__badge--green {
  background: rgba(16, 185, 129, 0.15) !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
  color: #059669 !important;
}

[data-theme="light"] .exp-feat-card__title {
  color: #0f172a;
}

[data-theme="light"] .exp-feat-card__desc {
  color: #475569;
}

[data-theme="light"] .exp-feat-card__action-btn {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(15, 23, 42, 0.1);
  color: #64748b;
}

[data-theme="light"] .exp-feat-card__btn--outline {
  color: #0f172a;
  border-color: rgba(15, 23, 42, 0.14);
}

[data-theme="light"] .exp-feat-card__btn--outline:hover {
  background: rgba(15, 23, 42, 0.04);
  color: #0f172a;
}

[data-theme="light"] .exp-res-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .exp-res-card:hover {
  border-color: rgba(124, 255, 107, 0.3);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .exp-res-card__title {
  color: #0f172a;
}

[data-theme="light"] .exp-res-card__desc {
  color: #475569;
}

[data-theme="light"] .exp-res-card__footer {
  border-top-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .exp-res-card__action-btn {
  background: #f8fafc;
  border-color: rgba(15, 23, 42, 0.08);
  color: #64748b;
}

[data-theme="light"] .exp-dl-panel {
  background: linear-gradient(135deg, rgba(124, 255, 107, 0.03) 0%, #fff 60%);
  border-color: rgba(124, 255, 107, 0.2);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .exp-dl-panel__header {
  border-bottom-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .exp-dl-panel__title {
  color: #0f172a;
}

[data-theme="light"] .exp-dl-panel__subtitle {
  color: #475569;
}

[data-theme="light"] .exp-dl-card {
  background: #f8fafc;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .exp-dl-card:hover {
  background: rgba(124, 255, 107, 0.03);
  border-color: rgba(124, 255, 107, 0.2);
}

[data-theme="light"] .exp-dl-card__name {
  color: #0f172a;
}

[data-theme="light"] .exp-dl-card__meta {
  color: #64748b;
}


/* ============================================================
   TUTORIALS — FAQ SECTION
   ============================================================ */
.tut-faq {
  position: relative;
  z-index: 10;
  background: var(--bg-primary);
  border-top: 1px solid var(--border-color);
  padding: 95px 0 85px;
  overflow: hidden;
}

/* Orb backgrounds */
.tut-faq__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.tut-faq__bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}

.tut-faq__bg-orb--1 {
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(124, 255, 107, 0.04) 0%, transparent 70%);
  top: -80px;
  right: -60px;
}

.tut-faq__bg-orb--2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.035) 0%, transparent 70%);
  bottom: 20px;
  left: -80px;
}

.tut-faq__inner {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 2;
}

/* ── Header ── */
.tut-faq__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 52px;
  flex-wrap: wrap;
}

.tut-faq__header-left {
  flex: 1;
  min-width: 280px;
}

.tut-faq__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(124, 255, 107, 0.08);
  border: 1px solid rgba(124, 255, 107, 0.2);
  padding: 5px 14px;
  border-radius: 100px;
  margin-bottom: 16px;
}

.tut-faq__title {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.tut-faq__subtitle {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-top: 12px;
  max-width: 600px;
}

/* Search Bar */
.tut-faq__search-wrap {
  flex-shrink: 0;
  width: 300px;
  position: relative;
  align-self: flex-start;
  margin-top: 6px;
}

.tut-faq__search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  color: var(--text-secondary);
  pointer-events: none;
  transition: color 0.2s ease;
}

.tut-faq__search {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 12px 80px 12px 40px;
  font-family: var(--font-display);
  font-size: 0.88rem;
  color: #fff;
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  -webkit-appearance: none;
}

.tut-faq__search::placeholder {
  color: var(--text-secondary);
}

.tut-faq__search:focus {
  border-color: rgba(124, 255, 107, 0.35);
  box-shadow: 0 0 0 3px rgba(124, 255, 107, 0.06);
}

.tut-faq__search:focus+.tut-faq__search-icon,
.tut-faq__search-wrap:focus-within .tut-faq__search-icon {
  color: var(--accent);
}

.tut-faq__search-count {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--accent);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.tut-faq__search-count.visible {
  opacity: 1;
}

/* ── Two-Column Grid ── */
.tut-faq__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 28px;
  margin-bottom: 40px;
}

.tut-faq__col {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Individual FAQ Item ── */
.tut-faq-item {
  border-bottom: 1px solid var(--border-color);
  transition: opacity 0.25s ease;
}

.tut-faq-item.hidden {
  display: none;
}

/* Trigger (Button) */
.tut-faq-item__trigger {
  width: 100%;
  background: transparent;
  border: none;
  padding: 22px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  position: relative;
  transition: all 0.2s ease;
}

.tut-faq-item__trigger:focus-visible {
  outline: 2px solid rgba(124, 255, 107, 0.5);
  outline-offset: 3px;
  border-radius: 4px;
}

.tut-faq-item__num {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  flex-shrink: 0;
  min-width: 24px;
  transition: color 0.2s ease;
}

.tut-faq-item__trigger:hover .tut-faq-item__num,
.tut-faq-item.active .tut-faq-item__num {
  color: var(--accent);
}

.tut-faq-item__q {
  flex: 1;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.45;
  transition: color 0.2s ease;
}

.tut-faq-item__trigger:hover .tut-faq-item__q,
.tut-faq-item.active .tut-faq-item__q {
  color: var(--accent);
}

/* +/- icon with rotation */
.tut-faq-item__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.tut-faq-item__icon i {
  position: absolute;
  font-size: 0.85rem;
  color: var(--text-secondary);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Plus icon visible by default */
.tut-faq-item__icon .ph-plus {
  opacity: 1;
  transform: rotate(0deg);
}

.tut-faq-item__icon .ph-minus {
  opacity: 0;
  transform: rotate(-90deg);
}

/* When active: swap to minus */
.tut-faq-item.active .tut-faq-item__icon {
  background: rgba(124, 255, 107, 0.08);
  border-color: rgba(124, 255, 107, 0.25);
}

.tut-faq-item.active .tut-faq-item__icon i {
  color: var(--accent);
}

.tut-faq-item.active .tut-faq-item__icon .ph-plus {
  opacity: 0;
  transform: rotate(90deg);
}

.tut-faq-item.active .tut-faq-item__icon .ph-minus {
  opacity: 1;
  transform: rotate(0deg);
}

.tut-faq-item__trigger:hover .tut-faq-item__icon {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}

/* Body (accordion) */
.tut-faq-item__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.tut-faq-item__body.open {
  max-height: 320px;
}

.tut-faq-item__content {
  padding-bottom: 22px;
  padding-left: 40px;
}

.tut-faq-item__content p {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 14px;
}

.tut-faq-item__content p strong {
  color: #fff;
  font-weight: 700;
}

/* Tag pills */
.tut-faq-item__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.tut-faq-tag {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 5px;
  background: rgba(124, 255, 107, 0.06);
  border: 1px solid rgba(124, 255, 107, 0.15);
  color: var(--accent);
}

/* Copy link button */
.tut-faq-item__copy-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.2s ease;
}

.tut-faq-item__copy-link:hover {
  color: var(--accent);
}

.tut-faq-item__copy-link i {
  font-size: 0.75rem;
}

/* No-results state */
.tut-faq__no-results {
  text-align: center;
  padding: 48px 0 24px;
  color: var(--text-secondary);
}

.tut-faq__no-results-icon {
  font-size: 2.5rem;
  color: var(--border-color);
  display: block;
  margin-bottom: 12px;
}

.tut-faq__no-results p {
  font-size: 0.9rem;
  font-family: var(--font-display);
}

/* ── Help Banner ── */
.tut-faq-banner {
  display: flex;
  align-items: center;
  gap: 24px;
  background: linear-gradient(135deg, rgba(124, 255, 107, 0.05) 0%, var(--bg-card) 60%);
  border: 1px solid rgba(124, 255, 107, 0.16);
  border-radius: 24px;
  padding: 32px 36px;
  position: relative;
  overflow: hidden;
  flex-wrap: wrap;
}

.tut-faq-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124, 255, 107, 0.4), transparent);
}

.tut-faq-banner__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 0% 50%, rgba(124, 255, 107, 0.05) 0%, transparent 70%);
  pointer-events: none;
}

.tut-faq-banner__icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(124, 255, 107, 0.08);
  border: 1px solid rgba(124, 255, 107, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tut-faq-banner__icon {
  font-size: 1.6rem;
  color: var(--accent);
}

.tut-faq-banner__body {
  flex: 1;
  min-width: 220px;
}

.tut-faq-banner__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 6px;
}

.tut-faq-banner__desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

.tut-faq-banner__btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.tut-faq-banner__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 700;
  padding: 12px 22px;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.tut-faq-banner__btn--primary {
  background: #2563eb;
  color: #ffffff !important;
}

.tut-faq-banner__btn--primary:hover {
  background: #1d4ed8;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.3);
  transform: translateY(-1px);
}

.tut-faq-banner__btn--outline {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.14);
}

.tut-faq-banner__btn--outline:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .tut-faq__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

@media (max-width: 768px) {
  .tut-faq {
    padding: 60px 0;
  }

  .tut-faq__inner {
    padding: 0 20px;
  }

  .tut-faq__header {
    flex-direction: column;
    gap: 20px;
    margin-bottom: 32px;
  }

  .tut-faq__search-wrap {
    width: 100%;
  }

  .tut-faq__title {
    font-size: 1.8rem;
  }

  .tut-faq-banner {
    padding: 24px 22px;
    flex-direction: column;
    align-items: flex-start;
  }

  .tut-faq-banner__btns {
    width: 100%;
  }

  .tut-faq-banner__btn {
    flex: 1;
    justify-content: center;
  }
}

/* ── Light Theme ── */
[data-theme="light"] .tut-faq {
  background: #f8fafc;
  border-top-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .tut-faq__title {
  color: #0f172a;
}

[data-theme="light"] .tut-faq__subtitle {
  color: #475569;
}

[data-theme="light"] .tut-faq__search {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.1);
  color: #0f172a;
}

[data-theme="light"] .tut-faq__search:focus {
  border-color: rgba(124, 255, 107, 0.5);
}

[data-theme="light"] .tut-faq-item {
  border-bottom-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .tut-faq-item__q {
  color: #0f172a;
}

[data-theme="light"] .tut-faq-item__trigger:hover .tut-faq-item__q {
  color: #15803d;
}

[data-theme="light"] .tut-faq-item.active .tut-faq-item__q {
  color: #15803d;
}

[data-theme="light"] .tut-faq-item__icon {
  background: #f1f5f9;
  border-color: rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .tut-faq-item__content p {
  color: #475569;
}

[data-theme="light"] .tut-faq-item__content p strong {
  color: #0f172a;
}

[data-theme="light"] .tut-faq-tag {
  background: rgba(124, 255, 107, 0.05);
  border-color: rgba(124, 255, 107, 0.25);
}

[data-theme="light"] .tut-faq-banner {
  background: linear-gradient(135deg, rgba(124, 255, 107, 0.04) 0%, #fff 60%);
  border-color: rgba(124, 255, 107, 0.22);
}

[data-theme="light"] .tut-faq-banner__title {
  color: #0f172a;
}

[data-theme="light"] .tut-faq-banner__desc {
  color: #475569;
}

[data-theme="light"] .tut-faq-banner__btn--outline {
  color: #0f172a;
  border-color: rgba(15, 23, 42, 0.14);
}

[data-theme="light"] .tut-faq-banner__btn--outline:hover {
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.2);
  color: #0f172a;
}


/* ============================================================
   NEWSLETTER & COMMUNITY CTA SECTION
   ============================================================ */
.news-comm-sec {
  position: relative;
  z-index: 10;
  background: var(--bg-primary);
  border-top: 1px solid var(--border-color);
  padding: 100px 0;
  overflow: hidden;
}

/* Decorative backgrounds */
.news-comm-sec__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.news-comm-sec__bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
}

.news-comm-sec__bg-orb--1 {
  top: -100px;
  left: -100px;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(124, 255, 107, 0.05) 0%, transparent 70%);
}

.news-comm-sec__bg-orb--2 {
  bottom: -150px;
  right: -150px;
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.05) 0%, transparent 70%);
}

.news-comm-sec__bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.7;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 40%, transparent 100%);
}

.news-comm-sec__bg-shape {
  position: absolute;
  border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
  filter: blur(24px);
  opacity: 0.12;
  transition: transform 0.5s ease;
}

.news-comm-sec__bg-shape--1 {
  width: 180px;
  height: 180px;
  background: linear-gradient(135deg, var(--accent) 0%, #3b82f6 100%);
  top: 15%;
  right: 8%;
  animation: floatShape1 20s ease-in-out infinite alternate;
}

.news-comm-sec__bg-shape--2 {
  width: 140px;
  height: 140px;
  background: linear-gradient(135deg, #3b82f6 0%, #a78bfa 100%);
  bottom: 25%;
  left: 8%;
  animation: floatShape2 16s ease-in-out infinite alternate;
}

@keyframes floatShape1 {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
  }

  100% {
    transform: translateY(-40px) rotate(180deg) scale(1.15);
  }
}

@keyframes floatShape2 {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
  }

  100% {
    transform: translateY(35px) rotate(-180deg) scale(0.9);
  }
}

.news-comm-sec__inner {
  position: relative;
  z-index: 2;
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Header */
.news-comm-sec__header {
  text-align: center;
  margin-bottom: 48px;
  max-width: 760px;
}

.news-comm-sec__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(124, 255, 107, 0.08);
  border: 1px solid rgba(124, 255, 107, 0.2);
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 20px;
}

.news-comm-sec__title {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-bottom: 16px;
}

.news-comm-sec__subtitle {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Main Newsletter Card */
.news-comm-card-wrap {
  width: 100%;
  max-width: 680px;
  margin-bottom: 56px;
}

.news-comm-card {
  position: relative;
  background: rgba(10, 12, 22, 0.45);
  border: 1px solid var(--border-color);
  border-radius: 24px;
  padding: 42px 48px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
  text-align: center;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.news-comm-card:hover {
  border-color: rgba(124, 255, 107, 0.25);
  box-shadow: 0 32px 80px rgba(124, 255, 107, 0.06);
}

.news-comm-card__glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(124, 255, 107, 0.02) 0%, transparent 60%);
  pointer-events: none;
}

.news-comm-form {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  position: relative;
  z-index: 3;
}

.news-comm-input-wrap {
  position: relative;
  flex: 1;
  min-width: 280px;
}

.news-comm-input-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  font-size: 1.2rem;
  pointer-events: none;
  transition: color 0.3s ease;
}

.news-comm-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 15px 20px 15px 50px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
  backdrop-filter: blur(8px);
}

.news-comm-input::placeholder {
  color: var(--text-secondary);
}

.news-comm-input:focus {
  border-color: rgba(124, 255, 107, 0.4);
  box-shadow: 0 0 20px rgba(124, 255, 107, 0.15);
  background-color: rgba(255, 255, 255, 0.06);
}

.news-comm-input:focus+.news-comm-input-icon {
  color: var(--accent);
}

.news-comm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #2563eb;
  color: #ffffff !important;
  border: none;
  border-radius: 14px;
  padding: 15px 30px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}

.news-comm-btn:hover {
  background-color: #1d4ed8;
  color: #ffffff !important;
  box-shadow: 0 0 24px rgba(37, 99, 235, 0.35);
  transform: translateY(-1px);
}

.news-comm-btn:active {
  transform: translateY(1px);
}

.btn-sparkle-icon {
  font-size: 1.15rem;
  transition: transform 0.3s ease;
}

.news-comm-btn:hover .btn-sparkle-icon {
  transform: rotate(30deg) scale(1.15);
}

.news-comm-note {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin: 0;
  position: relative;
  z-index: 3;
}

/* Success State */
.news-comm-success {
  display: flex;
  align-items: center;
  gap: 24px;
  text-align: left;
  background: rgba(124, 255, 107, 0.06);
  border: 1px solid rgba(124, 255, 107, 0.2);
  border-radius: 18px;
  padding: 20px 28px;
  margin-bottom: 20px;
  position: relative;
  z-index: 3;
}

.success-icon-wrap {
  font-size: 2.5rem;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.success-content {
  flex: 1;
}

.success-content h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 4px 0;
}

.success-content p {
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* Community Grid (3 Columns) */
.news-comm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
  max-width: 1080px;
  margin-bottom: 64px;
}

.comm-card {
  background: rgba(10, 12, 22, 0.4);
  border: 1px solid var(--border-color);
  border-radius: 22px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

.comm-card:hover {
  transform: translateY(-6px);
  border-color: rgba(124, 255, 107, 0.18);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.comm-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}

.comm-card__icon--youtube {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.comm-card__icon--discord {
  background: rgba(88, 101, 242, 0.1);
  border: 1px solid rgba(88, 101, 242, 0.2);
  color: #5865f2;
}

.comm-card__icon--telegram {
  background: rgba(0, 136, 204, 0.1);
  border: 1px solid rgba(0, 136, 204, 0.2);
  color: #0088cc;
}

.comm-card__icon--blog {
  background: rgba(124, 255, 107, 0.08);
  border: 1px solid rgba(124, 255, 107, 0.2);
  color: var(--accent);
}

.comm-card__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.comm-card__desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
  flex: 1;
}

.comm-card__btn {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 10px 0;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-secondary);
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.comm-card:hover .comm-card__btn,
.comm-card__btn:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.18);
}

/* Hover Accent CTA for Cards */
.comm-card:hover .comm-card__btn--youtube,
.comm-card__btn--youtube:hover {
  background-color: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.3);
}

.comm-card:hover .comm-card__btn--discord,
.comm-card__btn--discord:hover {
  background-color: #5865f2 !important;
  border-color: #5865f2 !important;
  color: #ffffff !important;
  box-shadow: 0 0 16px rgba(88, 101, 242, 0.3);
}

.comm-card:hover .comm-card__btn--telegram,
.comm-card__btn--telegram:hover {
  background-color: #0088cc !important;
  border-color: #0088cc !important;
  color: #ffffff !important;
  box-shadow: 0 0 16px rgba(0, 136, 204, 0.3);
}

/* Statistics Panel */
.news-comm-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  width: 100%;
  max-width: 1080px;
  margin-bottom: 56px;
}

.stat-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 22px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.stat-card:hover {
  border-color: rgba(124, 255, 107, 0.15);
  background-color: rgba(255, 255, 255, 0.03);
}

.stat-card__number-wrap {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-card__number {
  background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.8) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat-card__plus {
  color: var(--accent);
  margin-left: 2px;
}

.stat-card__label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-weight: 550;
}

/* Trust Badges */
.news-comm-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 36px;
  justify-content: center;
  width: 100%;
  border-top: 1px solid var(--border-color);
  padding-top: 36px;
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 600;
}

.trust-badge i {
  color: var(--accent);
  font-size: 1rem;
}

/* Responsive grid modifications */
@media (max-width: 1100px) {
  .news-comm-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .news-comm-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .news-comm-sec {
    padding: 70px 0;
  }

  .news-comm-sec__inner {
    padding: 0 20px;
  }

  .news-comm-sec__title {
    font-size: 2.1rem;
  }

  .news-comm-card {
    padding: 30px 24px;
  }

  .news-comm-form {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .news-comm-btn {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .news-comm-grid {
    grid-template-columns: 1fr;
  }

  .news-comm-stats {
    grid-template-columns: 1fr;
  }

  .news-comm-trust {
    flex-direction: column;
    align-items: flex-start;
    padding-left: 10px;
    gap: 14px;
  }
}

/* Light Theme overrides */
[data-theme="light"] .news-comm-sec {
  background: #f8fafc;
  border-top-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .news-comm-sec__bg-grid {
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.02) 1px, transparent 1px);
}

[data-theme="light"] .news-comm-sec__title {
  color: #0f172a;
}

[data-theme="light"] .news-comm-sec__subtitle {
  color: #475569;
}

[data-theme="light"] .news-comm-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .news-comm-card:hover {
  border-color: rgba(124, 255, 107, 0.35);
  box-shadow: 0 24px 64px rgba(124, 255, 107, 0.08);
}

[data-theme="light"] .news-comm-input {
  background: #f8fafc;
  border-color: rgba(15, 23, 42, 0.1);
  color: #0f172a;
}

[data-theme="light"] .news-comm-input:focus {
  background: #fff;
}

[data-theme="light"] .success-content h3 {
  color: #15803d;
}

[data-theme="light"] .success-content p {
  color: #166534;
}

[data-theme="light"] .news-comm-success {
  background: rgba(34, 197, 94, 0.06);
  border-color: rgba(34, 197, 94, 0.2);
}

[data-theme="light"] .comm-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .comm-card:hover {
  border-color: rgba(124, 255, 107, 0.25);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .comm-card__title {
  color: #0f172a;
}

[data-theme="light"] .comm-card__desc {
  color: #475569;
}

[data-theme="light"] .comm-card__btn {
  background: #f8fafc;
  border-color: rgba(15, 23, 42, 0.08);
  color: #475569;
}

[data-theme="light"] .comm-card:hover .comm-card__btn {
  background-color: #f1f5f9;
  border-color: rgba(15, 23, 42, 0.15);
}

[data-theme="light"] .comm-card:hover .comm-card__btn--youtube {
  background-color: #ef4444;
  border-color: #ef4444;
  color: #fff;
}

[data-theme="light"] .comm-card:hover .comm-card__btn--discord {
  background-color: #5865f2;
  border-color: #5865f2;
  color: #fff;
}

[data-theme="light"] .comm-card:hover .comm-card__btn--telegram {
  background-color: #0088cc;
  border-color: #0088cc;
  color: #fff;
}

[data-theme="light"] .comm-card:hover .comm-card__btn--blog {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #06080f;
}

[data-theme="light"] .stat-card {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .stat-card:hover {
  border-color: rgba(124, 255, 107, 0.25);
}

[data-theme="light"] .stat-card__number {
  background: linear-gradient(135deg, #0f172a 0%, #334155 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="light"] .news-comm-trust {
  border-top-color: rgba(15, 23, 42, 0.06);
}

/* ── Section Badge Overrides (ensures green badge in dark theme) ── */
.tut-section-badge,
.dev-spec__eyebrow,
.dev-pop-tuts__eyebrow,
.exp-res__eyebrow,
.tut-faq__eyebrow,
.dev-tut-cat__eyebrow,
.news-comm-sec__eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--font-mono) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: #7cff6b !important;
  background: rgba(124, 255, 107, 0.08) !important;
  border: 1px solid rgba(124, 255, 107, 0.28) !important;
  border-radius: 100px !important;
  padding: 6px 16px 6px 12px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  margin-bottom: 16px !important;
  box-shadow: 0 2px 8px rgba(124, 255, 107, 0.08) !important;
}

.tut-section-badge__dot,
.badge-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background-color: #7cff6b !important;
  box-shadow: 0 0 10px #7cff6b, 0 0 4px #7cff6b !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}



/* ========================================================
   THEME PAGINATION ACCENT STYLES
   Dark Mode: Vibrant Emerald Green (#00d289)
   Light Mode: Vibrant Royal Blue (#2563eb)
   ======================================================== */

/* Dark Mode (Default) */
.rev-media-dot.active,
.blog-pagination .page-num.active,
.pagination .page-item.active .page-link,
.dl-pagination .page-num.active,
.cat-chip-dot.active,
.carousel-dot.active,
.page-number.active,
.page-btn.active {
  background: #00d289 !important;
  color: #050a0e !important;
  border-color: #00d289 !important;
  box-shadow: 0 0 14px rgba(0, 210, 137, 0.5) !important;
}

/* Light Mode Override */
[data-theme="light"] .rev-media-dot.active,
[data-theme="light"] .blog-pagination .page-num.active,
[data-theme="light"] .pagination .page-item.active .page-link,
[data-theme="light"] .dl-pagination .page-num.active,
[data-theme="light"] .cat-chip-dot.active,
[data-theme="light"] .carousel-dot.active,
[data-theme="light"] .page-number.active,
[data-theme="light"] .page-btn.active {
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: #2563eb !important;
  box-shadow: 0 0 14px rgba(37, 99, 235, 0.45) !important;
}

[data-theme="light"] .rev-media-dot {
  background: rgba(37, 99, 235, 0.25) !important;
}

[data-theme="light"] .rev-media-dot:hover {
  background: rgba(37, 99, 235, 0.5) !important;
}

/* ========================================================
   GLOBAL LIGHT THEME BLUE / DARK THEME GREEN ACCENT SYSTEM
   Light Mode: Royal Blue (#2563eb)
   Dark Mode: Neon Green (#7cff6b / #00d289)
   ======================================================== */

/* --- LIGHT THEME (BLUE SHADE) OVERRIDES --- */
[data-theme="light"] {
  --accent: #2563eb !important;
  --accent-light: #3b82f6 !important;
  --accent-hover: #1d4ed8 !important;
  --accent-rgb: 37, 99, 235 !important;
  --border-hover: rgba(37, 99, 235, 0.3) !important;
}

/* Heading Accents in Light Mode */
[data-theme="light"] .dev-hero__heading-accent,
[data-theme="light"] .tut-hero__heading-accent,
[data-theme="light"] .rev-hero__heading-accent,
[data-theme="light"] .blog-hero__heading-accent,
[data-theme="light"] .news-hero-title span,
[data-theme="light"] .hero-title-accent,
[data-theme="light"] .heading-accent {
  color: #2563eb !important;
  background: linear-gradient(135deg, #2563eb 30%, #3b82f6 90%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Badges & Pill Tags in Light Mode */
[data-theme="light"] .dev-hero__badge,
[data-theme="light"] .tut-hero__badge,
[data-theme="light"] .rev-hero__badge,
[data-theme="light"] .news-badge,
[data-theme="light"] .blog-badge,
[data-theme="light"] .hero-badge,
[data-theme="light"] .badge-pill,
[data-theme="light"] .tut-badge {
  background: rgba(37, 99, 235, 0.1) !important;
  border-color: rgba(37, 99, 235, 0.25) !important;
  color: #2563eb !important;
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.08) !important;
}

/* Badge Dots in Light Mode */
[data-theme="light"] .dev-hero__badge-dot,
[data-theme="light"] .tut-badge-dot,
[data-theme="light"] .badge-dot {
  background: #2563eb !important;
  box-shadow: 0 0 8px rgba(37, 99, 235, 0.5) !important;
}

/* Stat Plus Suffixes in Light Mode */
[data-theme="light"] .dev-stat__suffix,
[data-theme="light"] .tut-stat__suffix,
[data-theme="light"] .stat-suffix,
[data-theme="light"] .rev-nl-stat__suffix {
  color: #2563eb !important;
}

/* Background Glow Orbs in Light Mode */
[data-theme="light"] .dev-hero__bg-orb--green,
[data-theme="light"] .tut-glow--green {
  background: radial-gradient(circle, rgba(37, 99, 235, 0.1) 0%, transparent 70%) !important;
}

/* Active Chips & Filter Tabs in Light Mode */
[data-theme="light"] .dev-filter-chip.active,
[data-theme="light"] .tut-cat-chip.active,
[data-theme="light"] .rev-comp-filter-chip.active,
[data-theme="light"] .cat-chip.active,
[data-theme="light"] .filter-chip.active {
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: #2563eb !important;
}