* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    section[id], header[id] {
      scroll-margin-top: 72px;
    }

    body {
      background-color: #141414;
      color: #FFFFFF;
      font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      overflow-x: hidden;
      line-height: 1.4;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* Hardware acceleration to eliminate GPU scroll stutter */
    .billboard,
    .netflix-card,
    .a4-sheet,
    .resume-panel,
    .row-container {
      transform: translateZ(0);
      backface-visibility: hidden;
    }

    /* Prevent hover reflow thrashing during active scroll */
    body.is-scrolling .netflix-card,
    body.is-scrolling .a4-sheet {
      pointer-events: none;
    }

    /* Custom Scrollbar */
    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    ::-webkit-scrollbar-track {
      background: #141414;
    }
    ::-webkit-scrollbar-thumb {
      background: #333333;
      border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: #E50914;
    }

    /* ================= CUSTOM RED DOT CURSOR ================= */
    html, body, a, button, input, textarea, select, [role="button"], * {
      cursor: none !important;
    }

    .custom-cursor-dot {
      position: fixed;
      top: 0;
      left: 0;
      width: 8px;
      height: 8px;
      background-color: #E50914;
      border-radius: 50%;
      pointer-events: none;
      z-index: 9999999;
      transform: translate(-50%, -50%);
      box-shadow: 0 0 10px #E50914, 0 0 20px rgba(229, 9, 20, 0.85);
      transition: transform 0.12s ease, opacity 0.2s ease;
      opacity: 0;
    }

    .custom-cursor-ring {
      position: fixed;
      top: 0;
      left: 0;
      width: 32px;
      height: 32px;
      border: 1.5px solid rgba(229, 9, 20, 0.6);
      border-radius: 50%;
      pointer-events: none;
      z-index: 9999998;
      transform: translate(-50%, -50%);
      transition: width 0.22s ease, height 0.22s ease, border-color 0.22s ease, background-color 0.22s ease, opacity 0.2s ease;
      opacity: 0;
    }

    /* Ambient Bright Red Trailing Light (Cursor Torch / Glow) */
    .custom-cursor-glow {
      position: fixed;
      top: 0;
      left: 0;
      width: 260px;
      height: 260px;
      border-radius: 50%;
      pointer-events: none;
      z-index: 9999990;
      transform: translate(-50%, -50%);
      background: radial-gradient(
        circle,
        rgba(229, 9, 20, 0.22) 0%,
        rgba(229, 9, 20, 0.12) 30%,
        rgba(229, 9, 20, 0.04) 55%,
        rgba(229, 9, 20, 0) 70%
      );
      filter: blur(14px);
      opacity: 0;
      transition: opacity 0.25s ease, transform 0.2s ease;
      will-change: left, top;
    }

    /* Hover effect on interactive elements */
    body.cursor-hover .custom-cursor-glow {
      transform: translate(-50%, -50%) scale(1.15);
      background: radial-gradient(
        circle,
        rgba(229, 9, 20, 0.30) 0%,
        rgba(229, 9, 20, 0.16) 30%,
        rgba(229, 9, 20, 0.05) 55%,
        rgba(229, 9, 20, 0) 70%
      );
    }

    body.cursor-active .custom-cursor-glow {
      transform: translate(-50%, -50%) scale(0.9);
      filter: blur(10px);
    }

    /* Hover effect on interactive elements */
    body.cursor-hover .custom-cursor-ring {
      width: 46px;
      height: 46px;
      border-color: #E50914;
      background-color: rgba(229, 9, 20, 0.12);
      box-shadow: 0 0 14px rgba(229, 9, 20, 0.4);
    }

    body.cursor-hover .custom-cursor-dot {
      transform: translate(-50%, -50%) scale(1.35);
      box-shadow: 0 0 16px #ff1a26;
    }

    /* Click effect */
    body.cursor-active .custom-cursor-dot {
      transform: translate(-50%, -50%) scale(0.65);
    }

    body.cursor-active .custom-cursor-ring {
      transform: translate(-50%, -50%) scale(0.85);
    }

    /* Touch screen fallback */
    @media (hover: none) and (pointer: coarse) {
      html, body, a, button, input, textarea, select, [role="button"], * {
        cursor: auto !important;
      }
      .custom-cursor-dot, .custom-cursor-ring, .custom-cursor-glow {
        display: none !important;
      }
    }

    /* ================= NAVBAR ================= */
    .navbar {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 68px;
      padding: 0 4%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      z-index: 100;
      transition: background-color 0.4s ease, box-shadow 0.4s ease;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
    }

    .navbar.scrolled {
      background-color: #141414;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
    }

    .nav-left {
      display: flex;
      align-items: center;
      gap: 32px;
    }

    .logo {
      color: #E50914;
      font-size: 1.35rem;
      font-weight: 900;
      letter-spacing: 0.1em;
      text-decoration: none;
      font-family: 'Montserrat', sans-serif;
      transition: transform 0.2s ease;
    }

    .logo:hover {
      transform: scale(1.04);
    }

    .nav-links {
      display: flex;
      list-style: none;
      gap: 20px;
    }

    .nav-link {
      color: #E5E5E5;
      text-decoration: none;
      font-size: 0.88rem;
      font-weight: 500;
      transition: color 0.2s ease;
    }

    .nav-link:hover,
    .nav-link.active {
      color: #FFFFFF;
      font-weight: 700;
    }

    .nav-right {
      display: flex;
      align-items: center;
      gap: 20px;
    }

    .nav-icon-btn {
      background: transparent;
      border: none;
      color: #FFFFFF;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 6px;
      transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .nav-icon-btn:hover {
      transform: scale(1.1);
      opacity: 0.85;
    }

    .nav-icon-btn svg {
      width: 20px;
      height: 20px;
      fill: currentColor;
    }

    /* Profile Avatar Dropdown */
    .profile-menu-container {
      position: relative;
    }

    .profile-trigger {
      display: flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
    }

    .profile-thumb {
      width: 34px;
      height: 34px;
      border-radius: 4px;
      object-fit: cover;
      object-position: center 20%;
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .caret {
      color: #FFFFFF;
      font-size: 0.75rem;
      transition: transform 0.2s ease;
    }

    .profile-menu-container:hover .caret {
      transform: rotate(180deg);
    }

    .profile-dropdown {
      position: absolute;
      top: 100%;
      right: 0;
      margin-top: 10px;
      width: 200px;
      background: rgba(0, 0, 0, 0.95);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 4px;
      padding: 10px 0;
      display: none;
      flex-direction: column;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.9);
      backdrop-filter: blur(10px);
    }

    .profile-menu-container:hover .profile-dropdown {
      display: flex;
    }

    .dropdown-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 16px;
      color: #E5E5E5;
      text-decoration: none;
      font-size: 0.85rem;
      transition: background 0.2s ease, color 0.2s ease;
    }

    .dropdown-item:hover {
      background: rgba(255, 255, 255, 0.1);
      color: #FFFFFF;
    }

    .dropdown-divider {
      height: 1px;
      background: rgba(255, 255, 255, 0.15);
      margin: 6px 0;
    }

    /* ================= BILLBOARD HERO BANNER ================= */
    .billboard {
      position: relative;
      width: 100%;
      height: 85vh;
      min-height: 560px;
      max-height: 820px;
      display: flex;
      align-items: center;
      padding: 0 4%;
      overflow: hidden;
    }

    .billboard-bg {
      position: absolute;
      inset: 0;
      z-index: 1;
    }

    .billboard-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: right center;
      filter: brightness(1.15) contrast(1.05);
      transition: filter 0.3s ease;
    }

    /* Cinematic Gradients for Seamless Blend */
    .billboard-vignette {
      position: absolute;
      inset: 0;
      z-index: 2;
      background: linear-gradient(90deg, rgba(20, 20, 20, 0.96) 0%, rgba(20, 20, 20, 0.82) 30%, rgba(20, 20, 20, 0.12) 60%, rgba(20, 20, 20, 0) 78%),
                  linear-gradient(180deg, rgba(20, 20, 20, 0) 65%, rgba(20, 20, 20, 0.65) 88%, #141414 100%);
    }

    .billboard-content {
      position: relative;
      z-index: 5;
      max-width: 580px;
      margin-top: 30px;
    }

    .series-badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.25em;
      color: #E50914;
      text-transform: uppercase;
      margin-bottom: 12px;
    }

    .series-badge::before {
      content: '';
      display: inline-block;
      width: 14px;
      height: 3px;
      background: #E50914;
      border-radius: 2px;
    }

    .billboard-title {
      font-size: clamp(3.2rem, 7.5vw, 5.8rem);
      font-family: 'Bebas Neue', 'Montserrat', sans-serif;
      letter-spacing: 0.04em;
      line-height: 0.95;
      color: #FFFFFF;
      text-transform: uppercase;
      text-shadow: 0 4px 24px rgba(0, 0, 0, 0.9);
      margin-bottom: 14px;
    }

    .billboard-meta {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 0.85rem;
      margin-bottom: 16px;
    }

    .match-score {
      color: #46D369;
      font-weight: 800;
    }

    .meta-tag {
      border: 1px solid rgba(255, 255, 255, 0.4);
      padding: 1px 6px;
      font-size: 0.75rem;
      border-radius: 2px;
    }

    .meta-hd {
      border: 1px solid rgba(255, 255, 255, 0.4);
      padding: 1px 5px;
      font-size: 0.7rem;
      font-weight: 700;
      border-radius: 2px;
    }

    .billboard-desc {
      font-size: clamp(0.9rem, 1.2vw, 1.05rem);
      color: #FFFFFF;
      line-height: 1.5;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
      margin-bottom: 24px;
      font-weight: 400;
    }

    .billboard-actions {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .btn-play {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: #FFFFFF;
      color: #000000;
      border: none;
      padding: 12px 28px;
      font-size: 1.05rem;
      font-weight: 800;
      font-family: inherit;
      border-radius: 4px;
      cursor: pointer;
      text-decoration: none;
      transition: background 0.2s ease, transform 0.2s ease;
    }

    .btn-play:hover {
      background: rgba(255, 255, 255, 0.75);
      transform: scale(1.03);
    }

    .btn-info {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: rgba(109, 109, 110, 0.7);
      color: #FFFFFF;
      border: none;
      padding: 12px 26px;
      font-size: 1.05rem;
      font-weight: 700;
      font-family: inherit;
      border-radius: 4px;
      cursor: pointer;
      backdrop-filter: blur(6px);
      transition: background 0.2s ease, transform 0.2s ease;
    }

    .btn-info:hover {
      background: rgba(109, 109, 110, 0.4);
      transform: scale(1.03);
    }

    .btn-icon {
      width: 22px;
      height: 22px;
      fill: currentColor;
    }

    /* ================= NETFLIX ROWS & CAROUSELS ================= */
    .content-rows {
      position: relative;
      z-index: 10;
      margin-top: -60px;
      display: flex;
      flex-direction: column;
      gap: 40px;
      padding-bottom: 60px;
    }

    .row-container {
      padding: 0 4%;
    }

    .row-title {
      font-size: clamp(1.15rem, 1.8vw, 1.45rem);
      font-weight: 700;
      margin-bottom: 14px;
      color: #E5E5E5;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .row-title:hover {
      color: #FFFFFF;
    }

    .row-title .see-all {
      font-size: 0.85rem;
      color: #54b9c5;
      font-weight: 600;
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    .row-container:hover .see-all {
      opacity: 1;
    }

    /* Horizontal Card Slider */
    .row-cards {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      padding: 20px 0;
      scroll-behavior: smooth;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
    .row-cards::-webkit-scrollbar {
      display: none;
    }

    /* Individual Netflix Project Card */
    .netflix-card {
      position: relative;
      flex: 0 0 clamp(220px, 18vw, 290px);
      height: clamp(130px, 11vw, 175px);
      border-radius: 4px;
      overflow: hidden;
      cursor: pointer;
      background: #181818;
      border: 1px solid rgba(255, 255, 255, 0.08);
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }

    .card-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.85;
      transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .card-gradient {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.95) 100%);
      z-index: 2;
    }

    .card-body {
      position: relative;
      z-index: 3;
      padding: 12px 14px;
    }

    .card-category {
      font-size: 0.68rem;
      font-weight: 800;
      color: #E50914;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      margin-bottom: 2px;
    }

    .card-title {
      font-size: 1.05rem;
      font-weight: 700;
      color: #FFFFFF;
      line-height: 1.2;
      margin-bottom: 4px;
    }

    .card-meta {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.75rem;
    }

    .card-match {
      color: #46D369;
      font-weight: 700;
    }

    .card-tags {
      color: #AAAAAA;
      font-size: 0.72rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Hover Zoom on Cards */
    .netflix-card:hover {
      transform: scale(1.08) translateY(-6px);
      box-shadow: 0 12px 35px rgba(0, 0, 0, 0.9), 0 0 15px rgba(229, 9, 20, 0.3);
      border-color: rgba(255, 255, 255, 0.4);
      z-index: 20;
    }

    .netflix-card:hover .card-bg {
      transform: scale(1.08);
      opacity: 1;
    }

    /* Top 10 Badge on Row 1 */
    .top10-badge {
      position: absolute;
      top: 8px;
      right: 8px;
      background: #E50914;
      color: #FFFFFF;
      font-weight: 900;
      font-size: 0.65rem;
      padding: 2px 6px;
      border-radius: 2px;
      letter-spacing: 0.05em;
      z-index: 4;
    }

    /* Continue Exploring - Vector Art Backgrounds & Progress Bars */
    .card-art-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      transition: transform 0.35s ease, filter 0.35s ease;
      background: #141414;
    }

    .netflix-card:hover .card-art-bg {
      transform: scale(1.06);
      filter: brightness(1.22);
    }

    .card-svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .card-progress-bar {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: rgba(255, 255, 255, 0.16);
      z-index: 5;
    }

    .card-progress-fill {
      height: 100%;
      background: #E50914;
      box-shadow: 0 0 8px rgba(229, 9, 20, 0.85);
      border-radius: 0 2px 2px 0;
    }

    /* Netflix Continue Watching - Circular Play Button in Top Right */
    .card-play-action {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: rgba(15, 15, 15, 0.72);
      border: 1.5px solid rgba(255, 255, 255, 0.65);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 4;
      color: #FFFFFF;
      backdrop-filter: blur(4px);
      transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
    }

    .card-play-action svg {
      width: 14px;
      height: 14px;
      margin-left: 2px;
      transition: transform 0.2s ease;
    }

    .card-ep-tag {
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 3px;
      display: block;
      font-family: 'Montserrat', sans-serif;
    }

    /* Continue Exploring - Distinct Card Color Themes */
    .card-theme-gold:hover {
      border-color: rgba(245, 158, 11, 0.85) !important;
      box-shadow: 0 12px 35px rgba(0, 0, 0, 0.9), 0 0 22px rgba(245, 158, 11, 0.4) !important;
    }
    .card-theme-gold:hover .card-play-action {
      background: #F59E0B;
      border-color: #F59E0B;
      color: #0b0700;
      transform: scale(1.15);
      box-shadow: 0 0 15px rgba(245, 158, 11, 0.75);
    }
    .card-theme-gold .card-ep-tag {
      color: #F59E0B;
    }
    .card-theme-gold .card-category {
      color: #FBBF24;
    }
    .card-theme-gold .card-progress-fill {
      background: #F59E0B;
      box-shadow: 0 0 8px rgba(245, 158, 11, 0.85);
    }

    .card-theme-cyan:hover {
      border-color: rgba(0, 229, 255, 0.85) !important;
      box-shadow: 0 12px 35px rgba(0, 0, 0, 0.9), 0 0 22px rgba(0, 229, 255, 0.4) !important;
    }
    .card-theme-cyan:hover .card-play-action {
      background: #00E5FF;
      border-color: #00E5FF;
      color: #021217;
      transform: scale(1.15);
      box-shadow: 0 0 15px rgba(0, 229, 255, 0.75);
    }
    .card-theme-cyan .card-ep-tag {
      color: #00E5FF;
    }
    .card-theme-cyan .card-category {
      color: #38BDF8;
    }
    .card-theme-cyan .card-progress-fill {
      background: #00E5FF;
      box-shadow: 0 0 8px rgba(0, 229, 255, 0.85);
    }

    .card-theme-crimson:hover {
      border-color: rgba(229, 9, 20, 0.85) !important;
      box-shadow: 0 12px 35px rgba(0, 0, 0, 0.9), 0 0 22px rgba(229, 9, 20, 0.4) !important;
    }
    .card-theme-crimson:hover .card-play-action {
      background: #E50914;
      border-color: #E50914;
      color: #FFFFFF;
      transform: scale(1.15);
      box-shadow: 0 0 15px rgba(229, 9, 20, 0.75);
    }
    .card-theme-crimson .card-ep-tag {
      color: #E50914;
    }
    .card-theme-crimson .card-category {
      color: #FF4D4D;
    }
    .card-theme-crimson .card-progress-fill {
      background: #E50914;
      box-shadow: 0 0 8px rgba(229, 9, 20, 0.85);
    }

    .card-theme-emerald:hover {
      border-color: rgba(16, 185, 129, 0.85) !important;
      box-shadow: 0 12px 35px rgba(0, 0, 0, 0.9), 0 0 22px rgba(16, 185, 129, 0.4) !important;
    }
    .card-theme-emerald:hover .card-play-action {
      background: #10B981;
      border-color: #10B981;
      color: #01140b;
      transform: scale(1.15);
      box-shadow: 0 0 15px rgba(16, 185, 129, 0.75);
    }
    .card-theme-emerald .card-ep-tag {
      color: #10B981;
    }
    .card-theme-emerald .card-category {
      color: #34D399;
    }
    .card-theme-emerald .card-progress-fill {
      background: #10B981;
      box-shadow: 0 0 8px rgba(16, 185, 129, 0.85);
    }

    .card-theme-purple:hover {
      border-color: rgba(168, 85, 247, 0.85) !important;
      box-shadow: 0 12px 35px rgba(0, 0, 0, 0.9), 0 0 22px rgba(168, 85, 247, 0.4) !important;
    }
    .card-theme-purple:hover .card-play-action {
      background: #A855F7;
      border-color: #A855F7;
      color: #FFFFFF;
      transform: scale(1.15);
      box-shadow: 0 0 15px rgba(168, 85, 247, 0.75);
    }
    .card-theme-purple .card-ep-tag {
      color: #A855F7;
    }
    .card-theme-purple .card-category {
      color: #C084FC;
    }
    .card-theme-purple .card-progress-fill {
      background: #A855F7;
      box-shadow: 0 0 8px rgba(168, 85, 247, 0.85);
    }

    /* ================= MODAL DRAWER ================= */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.85);
      z-index: 200;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      backdrop-filter: blur(8px);
      animation: modalFadeIn 0.3s ease forwards;
    }

    .modal-overlay.open {
      display: flex;
    }

    .modal-card {
      background: #181818;
      width: 100%;
      max-width: 780px;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 16px 50px rgba(0, 0, 0, 0.95);
      position: relative;
      animation: modalScaleUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      max-height: 90vh;
      overflow-y: auto;
    }

    .modal-hero {
      position: relative;
      width: 100%;
      height: 300px;
      background: #0a0e18;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .modal-hero img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    .modal-hero-gradient {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 40%, #181818 100%);
    }

    .modal-close-btn {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 36px;
      height: 36px;
      background: #181818;
      color: #FFFFFF;
      border-radius: 50%;
      border: none;
      font-size: 1.2rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10;
      transition: background 0.2s ease;
    }

    .modal-close-btn:hover {
      background: #333333;
    }

    .modal-body {
      padding: 24px 32px 36px;
    }

    .modal-title {
      font-size: 2.2rem;
      font-weight: 800;
      margin-bottom: 10px;
      color: #FFFFFF;
    }

    .modal-meta {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 18px;
      font-size: 0.9rem;
    }

    .modal-actions {
      display: flex;
      align-items: center;
      gap: 16px;
      margin: 18px 0 22px 0;
    }

    .btn-modal-play {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: #FFFFFF;
      color: #000000;
      font-size: 1.05rem;
      font-weight: 800;
      padding: 10px 30px;
      border-radius: 5px;
      text-decoration: none;
      cursor: pointer;
      font-family: 'Montserrat', sans-serif;
      letter-spacing: 0.5px;
      transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
      box-shadow: 0 4px 18px rgba(0,0,0,0.45);
    }

    .btn-modal-play:hover {
      background: rgba(255, 255, 255, 0.85);
      color: #000000;
      transform: scale(1.04);
      box-shadow: 0 6px 24px rgba(255, 255, 255, 0.3);
    }

    .btn-modal-play svg {
      width: 22px;
      height: 22px;
      fill: #000000;
    }

    .modal-desc {
      color: #D2D2D2;
      font-size: 1rem;
      line-height: 1.6;
      margin-bottom: 24px;
    }

    .modal-specs {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 16px;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      padding-top: 20px;
    }

    .spec-group h4 {
      font-size: 0.75rem;
      color: #888888;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 4px;
    }

    .spec-group p {
      font-size: 0.92rem;
      color: #FFFFFF;
      font-weight: 600;
    }

    @keyframes modalFadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes modalScaleUp {
      from { transform: scale(0.92); }
      to { transform: scale(1); }
    }

    /* ================= FOOTER ================= */
    .netflix-footer {
      max-width: 980px;
      margin: 40px auto 0;
      padding: 0 4% 40px;
      color: #808080;
      font-size: 0.82rem;
    }

    .footer-socials {
      display: flex;
      gap: 20px;
      margin-bottom: 24px;
    }

    .footer-social-link {
      color: #FFFFFF;
      text-decoration: none;
      transition: opacity 0.2s ease;
    }

    .footer-social-link:hover {
      opacity: 0.7;
    }

    .footer-links {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      list-style: none;
      margin-bottom: 24px;
    }

    .footer-link {
      color: #808080;
      text-decoration: none;
      transition: color 0.2s ease;
    }

    .footer-link:hover {
      text-decoration: underline;
      color: #B3B3B3;
    }

    .service-code-btn {
      background: transparent;
      border: 1px solid #808080;
      color: #808080;
      padding: 6px 10px;
      font-size: 0.75rem;
      margin-bottom: 20px;
      cursor: pointer;
      transition: color 0.2s ease, border-color 0.2s ease;
    }

    .service-code-btn:hover {
      color: #FFFFFF;
      border-color: #FFFFFF;
    }

    .copyright {
      font-size: 0.75rem;
      color: #666666;
    }

    /* Responsive */
    @media (max-width: 768px) {
      .nav-links { display: none; }
      .footer-links { grid-template-columns: repeat(2, 1fr); }
      .screenplay-main-title { font-size: 1.35rem; }

      /* Mobile Billboard Hero - Cinematic Portrait Framing */
      .billboard {
        height: auto;
        min-height: 82vh;
        max-height: none;
        padding: 85px 5% 24px 5%;
        display: flex;
        align-items: flex-end;
      }

      .billboard-bg {
        position: absolute;
        inset: 0;
      }

      .billboard-img {
        object-position: 68% 10%;
        filter: brightness(0.82) contrast(1.1);
        transition: none;
      }

      .billboard-vignette {
        background:
          /* Top bar vignette for clear navbar reading */
          linear-gradient(180deg, rgba(20, 20, 20, 0.92) 0%, rgba(20, 20, 20, 0.4) 18%, transparent 35%),
          /* Vertical gradient: transparent over face, deep black over text & controls */
          linear-gradient(180deg, transparent 15%, rgba(20, 20, 20, 0.5) 45%, rgba(20, 20, 20, 0.94) 72%, #141414 100%),
          /* Radial focus on subject */
          radial-gradient(circle at 68% 28%, transparent 25%, rgba(20, 20, 20, 0.7) 85%);
      }

      .billboard-content {
        position: relative;
        z-index: 5;
        max-width: 100%;
        margin-top: auto;
        padding-top: 20px;
      }

      .series-badge {
        font-size: 0.72rem;
        letter-spacing: 0.22em;
        margin-bottom: 8px;
      }

      .billboard-title {
        font-size: clamp(2.6rem, 11vw, 3.8rem);
        line-height: 0.95;
        margin-bottom: 10px;
        text-shadow: 0 4px 20px rgba(0, 0, 0, 0.95);
      }

      .billboard-meta {
        gap: 8px;
        font-size: 0.78rem;
        margin-bottom: 12px;
        flex-wrap: wrap;
      }

      .billboard-desc {
        font-size: 0.88rem;
        line-height: 1.45;
        margin-bottom: 20px;
        color: #E2E2E2;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95), 0 0 20px rgba(0, 0, 0, 0.9);
        max-width: 98%;
      }

      .billboard-actions {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
      }

      .btn-play,
      .btn-info {
        flex: 1;
        justify-content: center;
        padding: 11px 16px;
        font-size: 0.95rem;
        border-radius: 5px;
      }

      /* Content Rows - Reset desktop negative margin on mobile so it never overlaps hero buttons */
      .content-rows {
        margin-top: 16px;
        gap: 28px;
        padding-bottom: 40px;
      }
    }

    /* ================= STORY & RESUME SECTION ================= */
    .story-resume-section {
      padding: 40px 4% 60px 4%;
      position: relative;
      z-index: 5;
    }

    .story-section-header {
      margin-bottom: 24px;
    }

    .screenplay-header {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .screenplay-eyebrow-row {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .screenplay-red-h-line {
      width: 1cm;
      height: 3px;
      background: #E50914;
      border-radius: 2px;
      box-shadow: 0 0 8px rgba(229, 9, 20, 0.7);
      flex-shrink: 0;
    }

    .screenplay-tag {
      font-size: 0.95rem;
      font-weight: 700;
      color: #E50914;
      letter-spacing: 3px;
      text-transform: uppercase;
      font-family: 'Montserrat', sans-serif;
    }

    .screenplay-main-title {
      font-size: 1.55rem;
      font-weight: 800;
      color: #FFFFFF;
      letter-spacing: 1.5px;
      line-height: 1.2;
      text-transform: uppercase;
      font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      margin: 4px 0 0 0;
      display: inline-block;
      transform: scaleY(1.25);
      transform-origin: left center;
    }

    .story-resume-container {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 330px;
      gap: 32px;
      align-items: start;
    }

    /* Left Column: A4 Paper Sheet */
    .story-paper-wrapper {
      position: relative;
      width: 100%;
    }

    /* ================= STORY BLACK PAGE STYLES ================= */
    .story-black-page {
      background: #09090b !important;
      color: #f4f4f5 !important;
      border: 1px solid rgba(229, 9, 20, 0.4) !important;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.9), 0 0 35px rgba(229, 9, 20, 0.12) !important;
      border-radius: 6px;
      padding: 44px 48px;
      min-height: 480px;
    }

    .story-black-page::before {
      display: none !important; /* Hide old paper fold */
    }

    .story-black-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 24px;
    }

    .story-header-left {
      display: flex;
      flex-direction: column;
    }

    .story-header-eyebrow {
      color: #ffffff;
      font-family: 'Montserrat', sans-serif;
      font-size: 0.95rem;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 4px;
      display: block;
      opacity: 0.9;
    }

    .story-header-title {
      color: #ffffff;
      font-family: 'Montserrat', sans-serif;
      font-size: 2.2rem;
      font-weight: 900;
      letter-spacing: 2px;
      text-transform: uppercase;
      margin: 0;
      line-height: 1.1;
      text-shadow: 0 0 20px rgba(255, 255, 255, 0.15);
    }

    .story-header-right {
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: flex-end;
    }

    .story-social-row {
      display: inline-flex;
      align-items: center;
      gap: 12px;
    }

    .story-social-sep {
      color: rgba(255, 255, 255, 0.3);
      font-size: 0.8rem;
    }

    .story-social-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #a1a1aa;
      text-decoration: none;
      font-size: 0.85rem;
      font-family: 'Montserrat', sans-serif;
      font-weight: 500;
      transition: all 0.2s ease;
    }

    .story-social-link svg {
      color: #E50914;
      transition: transform 0.2s ease;
    }

    .story-social-link:hover {
      color: #ffffff;
    }

    .story-social-link:hover svg {
      transform: scale(1.15);
      color: #ff3b30;
    }

    .story-red-divider {
      height: 2px;
      background: linear-gradient(90deg, #E50914 0%, rgba(229, 9, 20, 0.4) 60%, transparent 100%);
      margin: 24px 0;
    }

    .story-page-content {
      min-height: 220px;
      color: #e4e4e7;
      font-family: 'Montserrat', sans-serif;
      line-height: 1.8;
    }

    .story-page-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 36px;
      align-items: start;
    }

    .story-section-heading {
      color: #E50914;
      font-family: 'Montserrat', sans-serif;
      font-size: 1.25rem;
      font-weight: 800;
      letter-spacing: 2px;
      text-transform: uppercase;
      margin: 0 0 18px 0;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(229, 9, 20, 0.35);
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .story-edu-card {
      margin-bottom: 24px;
      padding-left: 14px;
      border-left: 2px solid #E50914;
    }

    .story-edu-title {
      font-size: 1.15rem;
      font-weight: 700;
      color: #ffffff !important;
      text-transform: none;
      margin: 0 0 6px 0;
      line-height: 1.35;
      letter-spacing: 0.2px;
    }

    .story-edu-degree {
      font-size: 0.95rem;
      font-weight: 600;
      color: #ffffff !important;
      margin: 0 0 4px 0;
      line-height: 1.45;
    }

    .story-edu-sub {
      font-size: 0.95rem;
      font-weight: 600;
      color: #ffffff !important;
      margin: 0 0 4px 0;
      line-height: 1.45;
    }

    .story-edu-classes {
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin-top: 4px;
    }

    .story-edu-class-line {
      font-size: 0.9rem;
      color: #d4d4d8;
      line-height: 1.4;
    }

    .story-skill-group {
      margin-bottom: 16px;
      padding-left: 14px;
      border-left: 2px solid #E50914;
    }

    .story-skill-category {
      font-size: 0.98rem;
      font-weight: 700;
      color: #ffffff !important;
      margin: 0 0 4px 0;
      line-height: 1.35;
    }

    .story-skill-items {
      font-size: 0.88rem;
      color: #d4d4d8;
      line-height: 1.45;
      margin: 0;
    }

    .story-exp-card {
      margin-bottom: 24px;
      padding-left: 14px;
      border-left: 2px solid #E50914;
    }

    .story-exp-role {
      font-size: 1.15rem;
      font-weight: 700;
      color: #ffffff !important;
      margin: 0 0 4px 0;
      line-height: 1.35;
      letter-spacing: 0.2px;
    }

    .story-exp-inst {
      font-size: 0.92rem;
      color: #e4e4e7 !important;
      font-style: italic;
      margin: 0 0 12px 0;
      line-height: 1.4;
    }

    .story-bullet-list {
      margin: 0;
      padding-left: 18px;
      color: #d4d4d8;
      font-size: 0.88rem;
      line-height: 1.6;
    }

    .story-bullet-list li {
      margin-bottom: 8px;
    }

    .story-bullet-list li strong {
      color: #ffffff;
      font-weight: 600;
    }

    .story-bullet-list li::marker {
      color: #E50914;
    }

    .story-proj-card {
      margin-bottom: 24px;
      padding-left: 14px;
      border-left: 2px solid #E50914;
    }

    .story-proj-title {
      font-size: 1.15rem;
      font-weight: 700;
      color: #ffffff !important;
      text-transform: none;
      margin: 0 0 4px 0;
      line-height: 1.35;
      letter-spacing: 0.2px;
    }

    .story-proj-subtitle {
      font-size: 0.94rem;
      font-weight: 600;
      color: #e4e4e7 !important;
      margin: 0 0 8px 0;
      line-height: 1.4;
    }

    .story-proj-desc {
      font-size: 0.88rem;
      color: #d4d4d8;
      line-height: 1.55;
      margin: 0 0 10px 0;
    }

    .story-proj-tech {
      font-size: 0.84rem;
      color: #a1a1aa;
      line-height: 1.5;
      margin-top: 10px;
      padding: 8px 12px;
      background: rgba(255, 255, 255, 0.03);
      border-radius: 6px;
      border: 1px solid rgba(255, 255, 255, 0.07);
    }

    .story-proj-tech-label {
      color: #ffffff;
      font-weight: 700;
      margin-right: 4px;
    }

    .story-cert-card {
      margin-bottom: 20px;
      padding-left: 14px;
      border-left: 2px solid #E50914;
    }

    .story-cert-title {
      font-size: 1.02rem;
      font-weight: 700;
      color: #ffffff;
      margin: 0 0 3px 0;
      line-height: 1.35;
    }

    .story-cert-issuer {
      font-size: 0.9rem;
      color: #d4d4d8;
      margin: 0 0 3px 0;
      line-height: 1.4;
    }

    .story-cert-date {
      font-size: 0.82rem;
      color: #a1a1aa;
      font-style: italic;
      margin: 0;
      line-height: 1.4;
    }

    .story-page-content .story-section-heading {
      color: #E50914;
    }

    @media (max-width: 768px) {
      .story-page-grid {
        grid-template-columns: 1fr;
        gap: 24px;
      }
      .story-black-header {
        flex-direction: column;
        align-items: flex-start;
      }
      .story-header-right {
        align-items: flex-start;
      }
      .story-black-page {
        padding: 28px 24px;
      }
    }

    .story-paper-badge {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
      font-family: monospace;
      font-size: 0.8rem;
      color: #a3a3a3;
      letter-spacing: 1px;
    }

    .confidential-pill {
      background: rgba(229, 9, 20, 0.2);
      color: #ff4d4d;
      border: 1px solid rgba(229, 9, 20, 0.5);
      padding: 3px 8px;
      border-radius: 4px;
      font-weight: 700;
      font-size: 0.72rem;
      letter-spacing: 1.5px;
    }

    .a4-sheet {
      background: #fbfbf9;
      color: #1a1a1a;
      border-radius: 4px;
      padding: 48px 56px;
      width: 100%;
      box-shadow: 
        0 2px 5px rgba(0,0,0,0.25),
        0 15px 35px rgba(0,0,0,0.65),
        0 30px 60px rgba(0,0,0,0.85);
      border: 1px solid rgba(255,255,255,0.08);
      position: relative;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      overflow: hidden;
      transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.3s ease;
    }

    .a4-sheet:hover {
      box-shadow: 
        0 4px 8px rgba(0,0,0,0.3),
        0 20px 45px rgba(0,0,0,0.75),
        0 35px 75px rgba(0,0,0,0.95);
    }

    /* Subtle Paper Corner fold effect */
    .a4-sheet::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 32px 32px 0;
      border-color: transparent #e2e2dc transparent transparent;
      box-shadow: -2px 2px 4px rgba(0,0,0,0.15);
      pointer-events: none;
    }

    .paper-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      border-bottom: 2px solid #1a1a1a;
      padding-bottom: 14px;
      margin-bottom: 20px;
    }

    .paper-brand-logo {
      font-family: 'Impact', 'Bebas Neue', sans-serif;
      font-size: 1.6rem;
      letter-spacing: 2px;
      color: #E50914;
      line-height: 1;
    }

    .paper-brand-sub {
      display: block;
      font-size: 0.65rem;
      color: #666;
      font-family: monospace;
      letter-spacing: 1px;
      margin-top: 4px;
    }

    .paper-classification {
      text-align: right;
      font-family: monospace;
      font-size: 0.72rem;
      color: #444;
      line-height: 1.3;
    }

    .paper-id {
      display: block;
      color: #111;
      font-weight: 700;
      letter-spacing: 0.5px;
    }

    .paper-title-area {
      margin-bottom: 20px;
    }

    .paper-main-title {
      font-size: 2rem;
      font-weight: 800;
      letter-spacing: 1px;
      color: #0f172a;
      margin: 0 0 6px 0;
      line-height: 1.2;
      text-transform: uppercase;
      font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

    .paper-sub-title {
      font-size: 0.95rem;
      color: #4b5563;
      font-weight: 600;
      margin: 0;
      line-height: 1.4;
    }

    .paper-divider {
      height: 2px;
      background: #e2e8f0;
      margin-top: 14px;
    }

    .paper-meta-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px 12px;
      background: #f1f1ee;
      padding: 12px 16px;
      border-radius: 4px;
      font-size: 0.74rem;
      font-family: monospace;
      color: #374151;
      margin-bottom: 24px;
      border-left: 3px solid #E50914;
    }

    .paper-body {
      font-size: 0.9rem;
      line-height: 1.7;
      color: #27272a;
    }

    .paper-chapter {
      margin-bottom: 18px;
    }

    .chapter-title {
      font-size: 0.98rem;
      font-weight: 700;
      color: #111827;
      margin: 0 0 6px 0;
      letter-spacing: -0.2px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .chapter-title::after {
      content: '';
      flex: 1;
      height: 1px;
      background: #e5e7eb;
    }

    .paper-chapter p {
      margin: 0;
      color: #3f3f46;
      text-align: justify;
    }

    .paper-footer {
      margin-top: 32px;
      padding-top: 18px;
      border-top: 1px solid #d4d4d8;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
    }

    .hand-sign {
      font-family: 'Brush Script MT', 'Dancing Script', 'Caveat', cursive, sans-serif;
      font-size: 2.2rem;
      color: #1e3a8a;
      line-height: 1;
      transform: rotate(-3deg);
      user-select: none;
    }

    .sign-label {
      font-family: monospace;
      font-size: 0.65rem;
      color: #71717a;
      letter-spacing: 1px;
      margin-top: 4px;
    }

    .official-seal {
      width: 76px;
      height: 76px;
      border: 2px dashed #b91c1c;
      border-radius: 50%;
      padding: 3px;
      transform: rotate(-8deg);
      user-select: none;
    }

    .seal-inner {
      width: 100%;
      height: 100%;
      border: 1px solid #b91c1c;
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #b91c1c;
      text-transform: uppercase;
      font-weight: 800;
      line-height: 1.1;
    }

    .seal-inner span { font-size: 0.55rem; letter-spacing: 0.5px; }
    .seal-inner strong { font-size: 0.72rem; margin: 2px 0; letter-spacing: 1px; }
    .seal-inner small { font-size: 0.5rem; letter-spacing: 0.5px; }

    /* Right Column: Resume Panel (Compact Companion Box) */
    .resume-panel {
      background: #181818;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      padding: 22px 20px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.5);
      position: sticky;
      top: 90px;
      max-width: 320px;
      width: 100%;
    }

    .resume-panel-title {
      font-size: 1.22rem;
      font-weight: 800;
      color: #ffffff;
      margin: 0 0 10px 0;
      letter-spacing: 0.6px;
      line-height: 1.35;
      text-transform: uppercase;
      font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

    .resume-panel-desc {
      font-size: 0.82rem;
      color: #a3a3a3;
      line-height: 1.5;
      margin: 0 0 16px 0;
    }

    /* Actions: View & Download Buttons */
    .resume-actions-group {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 0;
    }

    .btn-resume-view {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: #E50914;
      color: #fff;
      font-size: 0.88rem;
      font-weight: 700;
      padding: 10px 16px;
      border-radius: 4px;
      border: none;
      cursor: pointer;
      transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
      box-shadow: 0 3px 12px rgba(229, 9, 20, 0.35);
    }

    .btn-resume-view:hover {
      background: #f40612;
      transform: translateY(-2px);
      box-shadow: 0 5px 16px rgba(229, 9, 20, 0.5);
    }

    .btn-resume-download {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: rgba(255, 255, 255, 0.08);
      color: #fff;
      font-size: 0.88rem;
      font-weight: 600;
      padding: 10px 16px;
      border-radius: 4px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      cursor: pointer;
      transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    }

    .btn-resume-download:hover {
      background: rgba(255, 255, 255, 0.16);
      border-color: #fff;
      transform: translateY(-2px);
    }

    .resume-footer-links {
      display: flex;
      justify-content: space-between;
      border-top: 1px solid rgba(255,255,255,0.08);
      padding-top: 18px;
    }

    .resume-footer-links a {
      color: #888;
      font-size: 0.78rem;
      text-decoration: none;
      transition: color 0.2s ease;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .resume-footer-links a:hover {
      color: #fff;
    }

    /* Modal for Resume View */
    .resume-modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.88);
      backdrop-filter: blur(8px);
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
      padding: 20px;
    }

    .resume-modal-overlay.open {
      opacity: 1;
      visibility: visible;
    }

    .resume-modal-card {
      background: #181818;
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 8px;
      max-width: 820px;
      width: 100%;
      max-height: 90vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-shadow: 0 25px 60px rgba(0,0,0,0.9);
      animation: modalSlideUp 0.3s ease forwards;
    }

    .resume-modal-header {
      padding: 16px 24px;
      background: #141414;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .resume-modal-header h3 {
      margin: 0;
      font-size: 1.15rem;
      color: #fff;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .resume-modal-actions {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .btn-modal-print {
      background: #E50914;
      color: #fff;
      border: none;
      padding: 7px 14px;
      font-size: 0.85rem;
      font-weight: 600;
      border-radius: 4px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background 0.2s;
    }

    .btn-modal-print:hover {
      background: #f40612;
    }

    .btn-modal-close {
      background: transparent;
      border: none;
      color: #aaa;
      font-size: 1.6rem;
      cursor: pointer;
      line-height: 1;
      transition: color 0.2s;
    }

    .btn-modal-close:hover {
      color: #fff;
    }

    .resume-modal-body {
      padding: 24px;
      overflow-y: auto;
      color: #d1d5db;
      font-size: 0.9rem;
      line-height: 1.6;
    }

    .resume-doc-preview {
      background: #ffffff;
      color: #111827;
      border-radius: 4px;
      padding: 36px 40px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }

    .resume-doc-header {
      border-bottom: 2px solid #E50914;
      padding-bottom: 16px;
      margin-bottom: 20px;
    }

    .resume-doc-name {
      font-size: 1.8rem;
      font-weight: 800;
      color: #111;
      margin: 0 0 4px 0;
      letter-spacing: -0.5px;
    }

    .resume-doc-roles {
      font-size: 1rem;
      font-weight: 600;
      color: #E50914;
      margin: 0 0 8px 0;
    }

    .resume-doc-contacts {
      font-size: 0.82rem;
      color: #555;
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
    }

    .resume-section-title {
      font-size: 0.95rem;
      font-weight: 800;
      color: #111;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin: 20px 0 10px 0;
      padding-bottom: 4px;
      border-bottom: 1px solid #e5e7eb;
    }

    .resume-grid-2col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .resume-item {
      margin-bottom: 14px;
    }

    .resume-item-title {
      font-weight: 700;
      color: #1f2937;
      font-size: 0.88rem;
      margin-bottom: 2px;
    }

    .resume-item-subtitle {
      font-size: 0.78rem;
      color: #6b7280;
      margin-bottom: 4px;
    }

    .resume-item-desc {
      font-size: 0.82rem;
      color: #4b5563;
      margin: 0;
    }

    @media (max-width: 992px) {
      .story-resume-container {
        grid-template-columns: 1fr;
      }
      .resume-panel {
        position: static;
      }
      .a4-sheet {
        padding: 30px 24px;
      }
      .paper-meta-grid {
        grid-template-columns: 1fr;
      }
      .resume-doc-preview {
        padding: 24px 20px;
      }
      .resume-grid-2col {
        grid-template-columns: 1fr;
      }
    }

    /* ================= MY SKILLS UNIVERSE (INTERACTIVE SELECTOR - NO BOXES) ================= */
    .skills-universe-section {
      padding: 30px 4% 60px 4%;
      position: relative;
      z-index: 5;
    }

    .skills-universe-header {
      margin-bottom: 28px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .skills-eyebrow-row {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .skills-red-h-line {
      width: 1cm;
      height: 3px;
      background: #E50914;
      border-radius: 2px;
      box-shadow: 0 0 8px rgba(229, 9, 20, 0.7);
      flex-shrink: 0;
    }

    .skills-genre-tag {
      font-size: 0.95rem;
      font-weight: 700;
      color: #E50914;
      letter-spacing: 3px;
      text-transform: uppercase;
      font-family: 'Montserrat', sans-serif;
    }

    .skills-universe-title {
      font-size: 1.55rem;
      font-weight: 800;
      color: #FFFFFF;
      letter-spacing: 1.5px;
      line-height: 1.2;
      text-transform: uppercase;
      font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      margin: 4px 0 0 0;
      display: inline-block;
      transform: scaleY(1.25);
      transform-origin: left center;
    }

    /* Open Layout Container (No Enclosing Box) */
    .skills-selector-layout {
      display: grid;
      grid-template-columns: 320px 1fr;
      gap: 40px;
      align-items: start;
      margin-top: 10px;
    }

    /* Left Side: Category Menu with Box Appearance on Select/Hover */
    .skills-category-nav {
      display: flex;
      flex-direction: column;
      gap: 10px;
      border-right: 1px solid rgba(255, 255, 255, 0.1);
      padding-right: 28px;
    }

    .skill-nav-btn {
      background: transparent;
      border: 1px solid transparent;
      border-left: 4px solid transparent;
      padding: 13px 16px;
      display: flex;
      align-items: center;
      gap: 14px;
      text-align: left;
      cursor: pointer !important;
      pointer-events: auto !important;
      user-select: none;
      color: #888888;
      font-size: 1.05rem;
      font-weight: 600;
      font-family: 'Montserrat', sans-serif;
      transition: background 0.1s ease, border-color 0.1s ease, color 0.1s ease, transform 0.1s ease;
      border-radius: 6px;
      position: relative;
    }

    .skill-nav-btn:hover {
      color: #FFFFFF;
      background: transparent;
      border-color: transparent;
      transform: translateX(4px);
    }

    /* Active Base Style */
    .skill-nav-btn.active {
      color: #FFFFFF;
      font-weight: 800;
      background: #1f1f1f;
      transform: translateX(6px);
    }

    .skill-nav-indicator {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: transparent;
      border: 1.5px solid #666;
      transition: background 0.1s ease, border-color 0.1s ease, transform 0.1s ease;
      flex-shrink: 0;
    }

    .skill-nav-btn.active .skill-nav-indicator {
      transform: scale(1.3);
    }

    /* ================= DISTINCT CATEGORY ACCENT COLORS ================= */
    /* 0: Languages -> Red (Original, Unchanged) */
    #skillTab0.active {
      border: 1px solid rgba(229, 9, 20, 0.5);
      border-left: 4px solid #E50914;
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5), 0 0 12px rgba(229, 9, 20, 0.25);
    }
    #skillTab0:hover .skill-nav-indicator { border-color: #E50914; }
    #skillTab0.active .skill-nav-indicator {
      background: #E50914;
      border-color: #E50914;
      box-shadow: 0 0 10px #E50914, 0 0 18px rgba(229, 9, 20, 0.85);
    }

    /* 1: Frontend -> Cyan / Electric Blue */
    #skillTab1.active {
      border: 1px solid rgba(0, 210, 255, 0.5);
      border-left: 4px solid #00D2FF;
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5), 0 0 14px rgba(0, 210, 255, 0.3);
    }
    #skillTab1:hover .skill-nav-indicator { border-color: #00D2FF; }
    #skillTab1.active .skill-nav-indicator {
      background: #00D2FF;
      border-color: #00D2FF;
      box-shadow: 0 0 10px #00D2FF, 0 0 18px rgba(0, 210, 255, 0.85);
    }

    /* 2: Backend -> Emerald Node Green */
    #skillTab2.active {
      border: 1px solid rgba(16, 185, 129, 0.5);
      border-left: 4px solid #10B981;
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5), 0 0 14px rgba(16, 185, 129, 0.3);
    }
    #skillTab2:hover .skill-nav-indicator { border-color: #10B981; }
    #skillTab2.active .skill-nav-indicator {
      background: #10B981;
      border-color: #10B981;
      box-shadow: 0 0 10px #10B981, 0 0 18px rgba(16, 185, 129, 0.85);
    }

    /* 3: Databases -> Amber Gold Flame */
    #skillTab3.active {
      border: 1px solid rgba(245, 158, 11, 0.5);
      border-left: 4px solid #F59E0B;
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5), 0 0 14px rgba(245, 158, 11, 0.3);
    }
    #skillTab3:hover .skill-nav-indicator { border-color: #F59E0B; }
    #skillTab3.active .skill-nav-indicator {
      background: #F59E0B;
      border-color: #F59E0B;
      box-shadow: 0 0 10px #F59E0B, 0 0 18px rgba(245, 158, 11, 0.85);
    }

    /* 4: Data Science & Analytics -> Electric Purple */
    #skillTab4.active {
      border: 1px solid rgba(168, 85, 247, 0.5);
      border-left: 4px solid #A855F7;
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5), 0 0 14px rgba(168, 85, 247, 0.3);
    }
    #skillTab4:hover .skill-nav-indicator { border-color: #A855F7; }
    #skillTab4.active .skill-nav-indicator {
      background: #A855F7;
      border-color: #A855F7;
      box-shadow: 0 0 10px #A855F7, 0 0 18px rgba(168, 85, 247, 0.85);
    }

    /* 5: Cloud & Backend Services -> Royal Cloud Blue */
    #skillTab5.active {
      border: 1px solid rgba(59, 130, 246, 0.5);
      border-left: 4px solid #3B82F6;
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5), 0 0 14px rgba(59, 130, 246, 0.3);
    }
    #skillTab5:hover .skill-nav-indicator { border-color: #3B82F6; }
    #skillTab5.active .skill-nav-indicator {
      background: #3B82F6;
      border-color: #3B82F6;
      box-shadow: 0 0 10px #3B82F6, 0 0 18px rgba(59, 130, 246, 0.85);
    }

    /* Matching Right-Side Accent Colors */
    #skillPanel0 .stage-eyebrow { color: #E50914; }
    #skillPanel1 .stage-eyebrow { color: #00D2FF; }
    #skillPanel2 .stage-eyebrow { color: #10B981; }
    #skillPanel3 .stage-eyebrow { color: #F59E0B; }
    #skillPanel4 .stage-eyebrow { color: #A855F7; }
    #skillPanel5 .stage-eyebrow { color: #3B82F6; }

    #skillPanel1 .stage-pill:hover {
      border-color: #00D2FF;
      background: rgba(0, 210, 255, 0.15);
      box-shadow: 0 4px 15px rgba(0, 210, 255, 0.4);
    }
    #skillPanel2 .stage-pill:hover {
      border-color: #10B981;
      background: rgba(16, 185, 129, 0.15);
      box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
    }
    #skillPanel3 .stage-rich-title { color: #F59E0B; }
    #skillPanel4 .stage-rich-title { color: #A855F7; }
    #skillPanel5 .stage-pill:hover {
      border-color: #3B82F6;
      background: rgba(59, 130, 246, 0.15);
      box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
    }

    /* Right Side: Active Content Display (Clean Box Card) */
    .skills-active-stage {
      padding: 24px 28px;
      background: #181818;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 8px;
      min-height: 200px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
    }

    .skill-panel-view {
      display: none !important;
      animation: skillFadeIn 0.12s ease-out forwards;
    }

    .skill-panel-view.active {
      display: block !important;
    }

    @keyframes skillFadeIn {
      from {
        opacity: 0;
        transform: translateY(8px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .stage-eyebrow {
      font-size: 0.78rem;
      font-family: monospace;
      color: #E50914;
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 6px;
      display: block;
    }

    .stage-title {
      font-size: 1.8rem;
      font-weight: 800;
      color: #FFFFFF;
      margin: 0 0 20px 0;
      letter-spacing: 0.5px;
      font-family: 'Montserrat', sans-serif;
    }

    /* Clean Tech Chips & Statements without heavy card boxes */
    .stage-tech-row {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: center;
    }

    .stage-pill {
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: #FFFFFF;
      font-size: 1.15rem;
      font-weight: 700;
      padding: 10px 22px;
      border-radius: 6px;
      letter-spacing: 0.8px;
      transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    }

    .stage-pill:hover {
      background: rgba(229, 9, 20, 0.15);
      border-color: #E50914;
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(229, 9, 20, 0.4);
    }

    .stage-rich-desc {
      font-size: 1.18rem;
      line-height: 1.6;
      color: #E5E5E5;
      max-width: 680px;
    }

    .stage-rich-title {
      color: #FFFFFF;
      font-size: 1.3rem;
      font-weight: 800;
      letter-spacing: 0.5px;
      display: inline-block;
      margin-right: 8px;
    }

    .stage-rich-subtitle {
      color: #9ca3af;
      font-weight: 400;
      font-size: 1.05rem;
    }

    @media (max-width: 820px) {
      .skills-selector-layout {
        grid-template-columns: 1fr;
        gap: 20px;
      }
      .skills-category-nav {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-right: 0;
        padding-bottom: 16px;
      }
      .stage-title {
        font-size: 1.5rem;
      }
      .stage-pill {
        font-size: 1rem;
        padding: 8px 16px;
      }
    }

    /* ================= SECTION: ORIGINALS (PROJECTS) ================= */
    .originals-section {
      padding: 30px 4% 60px 4%;
      position: relative;
      z-index: 5;
    }

    .originals-wrapper {
      display: flex;
      align-items: center;
      gap: 40px;
      flex-wrap: wrap;
    }

    .originals-brand-col {
      flex: 0 0 auto;
      min-width: 250px;
    }

    .originals-eyebrow-row {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 4px;
    }

    .originals-red-h-line {
      width: 1cm;
      height: 3px;
      background: #E50914;
      border-radius: 2px;
      box-shadow: 0 0 8px rgba(229, 9, 20, 0.7);
      flex-shrink: 0;
    }

    .originals-tag {
      font-size: 0.95rem;
      font-weight: 700;
      color: #E50914;
      letter-spacing: 3px;
      text-transform: uppercase;
      font-family: 'Montserrat', sans-serif;
    }

    .originals-title {
      font-size: clamp(3rem, 6vw, 4.6rem);
      font-weight: 900;
      color: #FFFFFF;
      letter-spacing: 0.06em;
      line-height: 1;
      text-transform: uppercase;
      font-family: 'Bebas Neue', 'Montserrat', sans-serif;
      text-shadow: 0 4px 24px rgba(0, 0, 0, 0.85);
      margin: 0;
      display: inline-block;
      transform: scaleY(1.15);
      transform-origin: left center;
    }

    .originals-cards-row {
      flex: 1 1 540px;
      display: flex;
      gap: 20px;
      align-items: center;
      flex-wrap: wrap;
    }

    .originals-card {
      flex: 0 0 auto;
      width: clamp(240px, 22vw, 290px);
      aspect-ratio: 682 / 1024;
      position: relative;
      border-radius: 8px;
      overflow: hidden;
      cursor: pointer;
      background: #181818;
      border: 1px solid rgba(255, 255, 255, 0.12);
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }

    .originals-card:hover {
      transform: scale(1.04) translateY(-3px);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 22px rgba(229, 9, 20, 0.35);
      border-color: rgba(229, 9, 20, 0.8);
      z-index: 10;
    }

    .originals-card .card-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.72;
      transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .originals-card:hover .card-bg {
      opacity: 0.92;
      transform: scale(1.05);
    }

    .originals-card .card-bg-art {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: #141414;
      transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s ease;
    }

    .originals-card:hover .card-bg-art {
      transform: scale(1.05);
      filter: brightness(1.15);
    }

    .originals-card .card-gradient {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0, 0, 0, 0.4) 42%, rgba(0, 0, 0, 0.92) 80%, rgba(0, 0, 0, 0.98) 100%);
      z-index: 2;
    }

    .originals-card .card-body {
      position: relative;
      z-index: 3;
      padding: 14px 16px;
    }

    .originals-card .top10-badge {
      position: absolute;
      top: 10px;
      right: 10px;
      background: #E50914;
      color: #FFFFFF;
      font-size: 0.7rem;
      font-weight: 800;
      letter-spacing: 0.5px;
      padding: 3px 8px;
      border-radius: 3px;
      z-index: 4;
      box-shadow: 0 2px 8px rgba(0,0,0,0.6);
    }

    .originals-card .card-title {
      font-size: 1.12rem;
      font-weight: 800;
      color: #FFFFFF;
      margin: 4px 0 6px 0;
      line-height: 1.25;
      font-family: 'Montserrat', sans-serif;
    }

    .originals-card .card-category {
      font-size: 0.7rem;
      font-weight: 700;
      color: #E50914;
      letter-spacing: 1.2px;
      text-transform: uppercase;
    }

    .originals-card .card-meta {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 0.8rem;
    }

    .btn-view-project {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: #E50914;
      color: #FFFFFF;
      border: 1px solid rgba(255, 255, 255, 0.25);
      border-radius: 4px;
      padding: 6px 14px;
      font-size: 0.78rem;
      font-weight: 800;
      cursor: pointer;
      letter-spacing: 0.6px;
      margin-top: 8px;
      transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
      font-family: 'Montserrat', sans-serif;
      text-transform: uppercase;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    }

    .btn-view-project:hover {
      background: #f40612;
      transform: translateY(-1px) scale(1.04);
      box-shadow: 0 4px 16px rgba(229, 9, 20, 0.65);
    }

    .btn-view-project svg {
      width: 14px;
      height: 14px;
    }

    /* ================= SECTION: ABOUT ME (THE PLOT) ================= */
    .about-me-section {
      padding: 40px 4% 70px 4%;
      position: relative;
      z-index: 5;
    }

    .about-header {
      margin-bottom: 28px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .about-eyebrow-row {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .about-red-h-line {
      width: 1cm;
      height: 3px;
      background: #E50914;
      border-radius: 2px;
      box-shadow: 0 0 8px rgba(229, 9, 20, 0.7);
      flex-shrink: 0;
    }

    .about-plot-tag {
      font-size: 0.95rem;
      font-weight: 700;
      color: #E50914;
      letter-spacing: 3px;
      text-transform: uppercase;
      font-family: 'Montserrat', sans-serif;
    }

    .about-main-title {
      font-size: clamp(2.8rem, 6vw, 4.6rem);
      font-weight: 900;
      color: #FFFFFF;
      letter-spacing: 0.06em;
      line-height: 1;
      text-transform: uppercase;
      font-family: 'Bebas Neue', 'Montserrat', sans-serif;
      text-shadow: 0 4px 24px rgba(0, 0, 0, 0.85);
      margin: 4px 0 0 0;
      display: inline-block;
      transform: scaleY(1.15);
      transform-origin: left center;
    }

    .about-layout {
      display: grid;
      grid-template-columns: 320px 1fr;
      gap: 40px;
      align-items: start;
    }

    /* Left Poster Card with Name on Pic */
    .about-poster-wrapper {
      position: relative;
    }

    .about-poster-card {
      position: relative;
      width: 100%;
      height: 440px;
      border-radius: 8px;
      overflow: hidden;
      background: #181818;
      border: 1px solid rgba(255, 255, 255, 0.15);
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8);
      transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    }

    .about-poster-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9), 0 0 25px rgba(229, 9, 20, 0.35);
      border-color: rgba(229, 9, 20, 0.7);
    }

    .about-poster-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      filter: brightness(0.95);
      transition: transform 0.4s ease, filter 0.3s ease;
    }

    .about-poster-card:hover .about-poster-img {
      transform: scale(1.03);
      filter: brightness(1.05);
    }

    .about-poster-gradient {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.7) 70%, rgba(10, 10, 10, 0.98) 100%);
      z-index: 2;
    }

    .about-poster-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 22px 20px;
      z-index: 3;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .about-role-pill {
      font-size: 0.72rem;
      font-weight: 800;
      color: #E50914;
      letter-spacing: 2px;
      text-transform: uppercase;
      font-family: 'Montserrat', sans-serif;
    }

    .about-poster-name {
      font-size: 2.1rem;
      font-weight: 900;
      color: #FFFFFF;
      letter-spacing: 0.05em;
      line-height: 1;
      text-transform: uppercase;
      font-family: 'Bebas Neue', 'Montserrat', sans-serif;
      text-shadow: 0 4px 16px rgba(0, 0, 0, 0.9);
      margin: 0;
    }

    /* Right Details & Info */
    .about-info-col {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .about-intro-text {
      font-size: 1.12rem;
      line-height: 1.7;
      color: #E5E5E5;
      font-weight: 400;
      border-left: 3px solid #E50914;
      padding-left: 18px;
      background: rgba(255, 255, 255, 0.02);
      padding-top: 10px;
      padding-bottom: 10px;
      border-radius: 0 6px 6px 0;
    }

    .about-intro-line {
      display: block;
      margin-bottom: 4px;
    }
    .about-intro-line:last-child {
      margin-bottom: 0;
    }

    /* Structured Metadata Cards */
    .about-meta-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 14px;
    }

    .about-meta-item {
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 6px;
      padding: 14px 18px;
      display: flex;
      flex-direction: column;
      gap: 5px;
      transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    }

    .about-meta-item:hover {
      background: rgba(255, 255, 255, 0.07);
      border-color: rgba(229, 9, 20, 0.6);
      transform: translateY(-2px);
    }

    .about-meta-label {
      font-size: 0.72rem;
      font-weight: 800;
      color: #E50914;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      font-family: 'Montserrat', sans-serif;
    }

    .about-meta-val {
      font-size: 0.98rem;
      font-weight: 600;
      color: #FFFFFF;
      line-height: 1.4;
      letter-spacing: 0.3px;
    }

    @media (max-width: 860px) {
      .about-layout {
        grid-template-columns: 1fr;
        gap: 28px;
      }
      .about-poster-card {
        height: 380px;
        max-width: 340px;
        margin: 0 auto;
      }
    }

    /* ================= SECTION: MY JOURNEY (4 SEASONS) ================= */
    .journey-section {
      padding: 40px 4% 70px 4%;
      position: relative;
      z-index: 5;
    }

    .journey-header {
      margin-bottom: 24px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .journey-eyebrow-row {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .journey-red-h-line {
      width: 1cm;
      height: 3px;
      background: #E50914;
      border-radius: 2px;
      box-shadow: 0 0 8px rgba(229, 9, 20, 0.7);
      flex-shrink: 0;
    }

    .journey-season-tag {
      font-size: 0.95rem;
      font-weight: 700;
      color: #E50914;
      letter-spacing: 3px;
      text-transform: uppercase;
      font-family: 'Montserrat', sans-serif;
    }

    .journey-main-title {
      font-size: clamp(2.8rem, 6vw, 4.6rem);
      font-weight: 900;
      color: #FFFFFF;
      letter-spacing: 0.06em;
      line-height: 1;
      text-transform: uppercase;
      font-family: 'Bebas Neue', 'Montserrat', sans-serif;
      text-shadow: 0 4px 24px rgba(0, 0, 0, 0.85);
      margin: 4px 0 0 0;
      display: inline-block;
      transform: scaleY(1.15);
      transform-origin: left center;
    }

    /* Season Tabs / Navigation Row - CLEAN NO BOXES */
    .journey-seasons-nav {
      display: flex;
      flex-wrap: wrap;
      gap: 32px;
      margin-bottom: 28px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      padding-bottom: 4px;
    }

    .season-nav-item {
      background: none;
      border: none;
      padding: 6px 0 12px 0;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 3px;
      cursor: pointer;
      position: relative;
      text-align: left;
      font-family: inherit;
      transition: transform 0.2s ease;
    }

    .season-item-title {
      font-size: 1.15rem;
      font-weight: 800;
      letter-spacing: 1px;
      text-transform: uppercase;
      font-family: 'Montserrat', sans-serif;
      color: #888888;
      transition: color 0.2s ease, text-shadow 0.2s ease;
    }

    .season-item-sub {
      font-size: 0.76rem;
      font-weight: 500;
      letter-spacing: 0.3px;
      color: #666666;
      transition: color 0.2s ease;
    }

    /* Minimalist White Highlight Underline */
    .season-nav-item::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 0;
      height: 3px;
      background: #FFFFFF;
      border-radius: 2px;
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
      transition: width 0.25s ease;
    }

    .season-nav-item:hover .season-item-title,
    .season-nav-item.active .season-item-title {
      color: #FFFFFF;
      text-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
    }

    .season-nav-item:hover .season-item-sub,
    .season-nav-item.active .season-item-sub {
      color: #D1D5DB;
    }

    .season-nav-item:hover::after,
    .season-nav-item.active::after {
      width: 100%;
    }

    /* Season Stage Panels - ONLY Active Season is Shown */
    .journey-season-panel {
      display: none;
      animation: journeyFadeIn 0.25s ease-out forwards;
    }

    .journey-season-panel.active {
      display: block;
    }

    @keyframes journeyFadeIn {
      from {
        opacity: 0;
        transform: translateY(6px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .season-panel-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 18px;
    }

    .season-title-badge {
      background: #E50914;
      color: #FFFFFF;
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 1.5px;
      padding: 3px 8px;
      border-radius: 3px;
      text-transform: uppercase;
    }

    .season-panel-name {
      font-size: 1.28rem;
      font-weight: 800;
      color: #FFFFFF;
      margin: 0;
      letter-spacing: 0.4px;
      font-family: 'Montserrat', sans-serif;
    }

    /* Episode Cards Grid */
    .season-episodes-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 20px;
    }

    .episode-card {
      --ep-accent: #E50914;
      background: #181818;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
    }

    .episode-card:hover {
      transform: translateY(-5px);
      border-color: var(--ep-accent, rgba(229, 9, 20, 0.85));
      box-shadow: 0 14px 35px rgba(0, 0, 0, 0.8), 0 0 24px color-mix(in srgb, var(--ep-accent, #E50914) 45%, transparent);
    }

    .episode-hero {
      position: relative;
      height: 165px;
      width: 100%;
      overflow: hidden;
      background: #111111;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 22px;
    }

    .episode-art-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
    }

    .episode-card:hover .episode-art-bg {
      transform: scale(1.05);
      filter: brightness(1.15);
    }

    .episode-theme-icon {
      position: relative;
      z-index: 3;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 50px;
      height: 50px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.12);
      backdrop-filter: blur(8px);
      transition: transform 0.3s ease, border-color 0.3s ease;
    }

    .episode-card:hover .episode-theme-icon {
      transform: scale(1.1) rotate(-4deg);
      border-color: rgba(255, 255, 255, 0.3);
    }

    .episode-theme-icon svg {
      width: 25px;
      height: 25px;
    }

    .episode-big-num {
      position: relative;
      z-index: 3;
      font-family: 'Bebas Neue', 'Montserrat', sans-serif;
      font-size: clamp(3.8rem, 5.5vw, 5.2rem);
      line-height: 1;
      font-weight: 900;
      letter-spacing: 2px;
      text-transform: uppercase;
      user-select: none;
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
      display: flex;
      align-items: baseline;
      gap: 5px;
      margin-left: auto;
    }

    .episode-big-num .ep-prefix {
      font-size: 0.38em;
      letter-spacing: 2px;
      opacity: 0.82;
      font-weight: 800;
    }

    .episode-card:hover .episode-big-num {
      transform: scale(1.08) translateX(-3px);
      filter: brightness(1.25);
    }

    .episode-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.78;
      transition: transform 0.35s ease, opacity 0.35s ease;
    }

    .episode-card:hover .episode-img {
      transform: scale(1.05);
      opacity: 0.95;
    }

    .episode-gradient {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(24, 24, 24, 0.7) 65%, #181818 100%);
      z-index: 2;
    }

    .episode-badge {
      position: absolute;
      top: 10px;
      left: 10px;
      background: #E50914;
      color: #FFFFFF;
      font-size: 0.68rem;
      font-weight: 800;
      letter-spacing: 1px;
      padding: 3px 8px;
      border-radius: 3px;
      z-index: 4;
      text-transform: uppercase;
      box-shadow: 0 2px 8px rgba(0,0,0,0.5);
    }

    .episode-body {
      padding: 16px 18px 20px 18px;
      display: flex;
      flex-direction: column;
      flex: 1;
      justify-content: space-between;
      gap: 12px;
    }

    .episode-title-group {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .episode-meta-tag {
      font-size: 0.68rem;
      font-weight: 800;
      color: #E50914;
      letter-spacing: 1.2px;
      text-transform: uppercase;
    }

    .episode-title {
      font-size: 1.15rem;
      font-weight: 800;
      color: #FFFFFF;
      margin: 0;
      line-height: 1.3;
      font-family: 'Montserrat', sans-serif;
    }

    .episode-desc {
      font-size: 0.88rem;
      color: #b0b0b0;
      line-height: 1.55;
      margin: 0;
    }

    .episode-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: auto;
    }

    .episode-tag-pill {
      font-size: 0.7rem;
      font-weight: 600;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.12);
      color: #D1D5DB;
      padding: 3px 8px;
      border-radius: 4px;
    }

    /* Season 5 Coming Soon Teaser Banner */
    .season-coming-soon {
      position: relative;
      width: 100%;
      min-height: 290px;
      border-radius: 8px;
      overflow: hidden;
      background: #181818;
      border: 1px dashed rgba(229, 9, 20, 0.45);
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 45px 24px;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .season-coming-soon:hover {
      border-color: #E50914;
      box-shadow: 0 12px 35px rgba(0, 0, 0, 0.8), 0 0 25px rgba(229, 9, 20, 0.3);
    }

    .coming-soon-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center right;
      opacity: 0.28;
      filter: blur(2px) brightness(0.6);
      transition: opacity 0.3s ease, transform 0.4s ease;
    }

    .season-coming-soon:hover .coming-soon-bg {
      opacity: 0.38;
      transform: scale(1.03);
    }

    .coming-soon-gradient {
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at center, rgba(229, 9, 20, 0.2) 0%, rgba(20, 20, 20, 0.88) 60%, #141414 100%);
      z-index: 2;
    }

    .coming-soon-content {
      position: relative;
      z-index: 3;
      max-width: 620px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    .coming-soon-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(229, 9, 20, 0.18);
      border: 1px solid #E50914;
      color: #E50914;
      font-size: 0.75rem;
      font-weight: 800;
      letter-spacing: 2px;
      padding: 4px 14px;
      border-radius: 30px;
      text-transform: uppercase;
      font-family: 'Montserrat', sans-serif;
    }

    .coming-soon-title {
      font-size: clamp(2.6rem, 5.5vw, 4rem);
      font-family: 'Bebas Neue', 'Montserrat', sans-serif;
      letter-spacing: 0.08em;
      line-height: 1;
      color: #FFFFFF;
      text-transform: uppercase;
      text-shadow: 0 4px 20px rgba(0, 0, 0, 0.9), 0 0 25px rgba(229, 9, 20, 0.5);
      margin: 0;
    }

    .coming-soon-desc {
      font-size: 1.02rem;
      color: #D1D5DB;
      line-height: 1.6;
      margin: 0;
    }

    .coming-soon-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
      margin-top: 6px;
    }

    .coming-soon-pill {
      font-size: 0.75rem;
      font-weight: 700;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.18);
      color: #FFFFFF;
      padding: 6px 14px;
      border-radius: 4px;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

    /* ================= SECTION: THE NEXT EPISODE (OUTRO) ================= */
    .next-episode-section {
      padding: 90px 4% 80px 4%;
      position: relative;
      z-index: 5;
      text-align: center;
      background: radial-gradient(circle at center, rgba(229, 9, 20, 0.12) 0%, rgba(20, 20, 20, 0.4) 50%, transparent 80%);
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      margin-top: 20px;
    }

    .next-episode-container {
      max-width: 820px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .next-ep-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 12px;
    }

    .next-ep-red-line {
      width: 1cm;
      height: 3px;
      background: #E50914;
      border-radius: 2px;
      box-shadow: 0 0 10px rgba(229, 9, 20, 0.8);
      flex-shrink: 0;
    }

    .next-ep-tag {
      font-size: 0.95rem;
      font-weight: 800;
      color: #E50914;
      letter-spacing: 3.5px;
      text-transform: uppercase;
      font-family: 'Montserrat', sans-serif;
    }

    .next-ep-main-title {
      font-size: clamp(3rem, 7.5vw, 5.5rem);
      font-family: 'Bebas Neue', 'Montserrat', sans-serif;
      letter-spacing: 0.08em;
      line-height: 0.95;
      color: #FFFFFF;
      text-transform: uppercase;
      text-shadow: 0 4px 28px rgba(0, 0, 0, 0.9), 0 0 25px rgba(229, 9, 20, 0.4);
      margin: 6px 0 16px 0;
      transform: scaleY(1.15);
      transform-origin: center;
    }

    .next-ep-name {
      font-size: clamp(1.4rem, 2.5vw, 2.1rem);
      font-weight: 900;
      color: #FFFFFF;
      letter-spacing: 2px;
      text-transform: uppercase;
      font-family: 'Montserrat', sans-serif;
      margin: 0 0 6px 0;
    }

    .next-ep-role {
      font-size: 0.95rem;
      font-weight: 700;
      color: #E50914;
      letter-spacing: 3px;
      text-transform: uppercase;
      margin: 0 0 16px 0;
      font-family: 'Montserrat', sans-serif;
    }

    /* Social Pills */
    .next-ep-socials {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      justify-content: center;
      margin-bottom: 30px;
    }

    /* ================= CONTACT FORM (NETFLIX STYLE) ================= */
    .contact-form-wrapper {
      width: 100%;
      max-width: 680px;
      margin: 24px auto 36px auto;
      background: rgba(18, 18, 18, 0.85);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 8px;
      padding: 36px 40px;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9), 0 0 30px rgba(229, 9, 20, 0.12);
      text-align: left;
    }

    .netflix-contact-form {
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .form-row-2col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .contact-form-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .contact-form-group label {
      font-size: 0.84rem;
      font-weight: 700;
      color: #e5e5e5;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      font-family: 'Montserrat', sans-serif;
    }

    .contact-form-group .req-star {
      color: #E50914;
    }

    .contact-input,
    .contact-textarea {
      width: 100%;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 5px;
      padding: 12px 14px;
      color: #ffffff;
      font-size: 0.95rem;
      font-family: 'Montserrat', sans-serif;
      transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
      box-sizing: border-box;
    }

    .contact-input:focus,
    .contact-textarea:focus {
      outline: none;
      background: rgba(255, 255, 255, 0.1);
      border-color: #E50914;
      box-shadow: 0 0 12px rgba(229, 9, 20, 0.4);
    }

    .contact-textarea {
      resize: vertical;
      min-height: 110px;
    }

    /* Consent Checkbox */
    .contact-consent-row {
      margin-top: 4px;
    }

    .consent-checkbox-label {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      cursor: pointer;
      user-select: none;
    }

    .consent-checkbox {
      width: 18px;
      height: 18px;
      margin-top: 2px;
      accent-color: #E50914;
      cursor: pointer;
      flex-shrink: 0;
    }

    .consent-text {
      font-size: 0.82rem;
      color: #a1a1aa;
      line-height: 1.45;
      font-family: 'Montserrat', sans-serif;
    }

    .contact-submit-row {
      display: flex;
      justify-content: flex-end;
      margin-top: 6px;
    }

    .btn-submit-message {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: #E50914;
      color: #FFFFFF;
      border: none;
      border-radius: 4px;
      padding: 13px 32px;
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      font-family: 'Montserrat', sans-serif;
      cursor: pointer;
      box-shadow: 0 4px 18px rgba(229, 9, 20, 0.5);
      transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    }

    .btn-submit-message:hover {
      background: #ff1f29;
      transform: translateY(-2px);
      box-shadow: 0 6px 24px rgba(229, 9, 20, 0.7);
    }

    .btn-submit-message:active {
      transform: translateY(0);
    }

    .contact-status-msg {
      padding: 12px 16px;
      border-radius: 5px;
      font-size: 0.9rem;
      font-weight: 600;
      line-height: 1.4;
      font-family: 'Montserrat', sans-serif;
    }

    .contact-status-msg.success {
      background: rgba(34, 197, 94, 0.15);
      border: 1px solid rgba(34, 197, 94, 0.4);
      color: #4ade80;
    }

    .contact-status-msg.error {
      background: rgba(239, 68, 68, 0.15);
      border: 1px solid rgba(239, 68, 68, 0.4);
      color: #f87171;
    }

    /* ================= PERSONALIZED PORTFOLIO PROMO CARD (BELOW CONTACT FORM) ================= */
    .portfolio-promo-card {
      width: 100%;
      max-width: 680px;
      margin: 0 auto 36px auto;
      background: linear-gradient(135deg, rgba(20, 20, 24, 0.95), rgba(12, 12, 14, 0.98));
      backdrop-filter: blur(14px);
      border: 1px solid rgba(229, 9, 20, 0.32);
      border-radius: 10px;
      padding: 32px 36px;
      box-shadow: 0 16px 45px rgba(0, 0, 0, 0.85), 0 0 28px rgba(229, 9, 20, 0.12);
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .portfolio-promo-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 10%;
      right: 10%;
      height: 1px;
      background: linear-gradient(90deg, transparent, #E50914, transparent);
    }

    .promo-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(229, 9, 20, 0.12);
      border: 1px solid rgba(229, 9, 20, 0.35);
      border-radius: 20px;
      padding: 4px 14px;
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      color: #FF3B30;
      text-transform: uppercase;
      margin-bottom: 14px;
    }

    .promo-badge-dot {
      width: 7px;
      height: 7px;
      background: #E50914;
      border-radius: 50%;
      box-shadow: 0 0 8px #E50914;
      animation: promoPulse 2s infinite ease-in-out;
    }

    @keyframes promoPulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(0.85); }
    }

    .promo-heading {
      font-size: clamp(1.25rem, 2.8vw, 1.6rem);
      font-weight: 800;
      color: #FFFFFF;
      letter-spacing: 0.3px;
      line-height: 1.3;
      margin: 0 0 10px 0;
      font-family: 'Montserrat', sans-serif;
    }

    .promo-description {
      color: #B3B3B3;
      font-size: 0.95rem;
      line-height: 1.55;
      max-width: 540px;
      margin: 0 auto 24px auto;
    }

    .promo-contacts-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      text-align: left;
    }

    .promo-tile-link,
    .promo-tile-link:visited,
    .promo-tile-link:active,
    .promo-tile-link:focus,
    .promo-contact-item,
    .promo-contact-item:visited,
    .promo-contact-item:active,
    .promo-contact-item:focus {
      color: #FFFFFF !important;
      text-decoration: none !important;
    }

    .promo-contact-item {
      display: flex;
      align-items: center;
      gap: 14px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      padding: 12px 18px;
      text-decoration: none;
      transition: all 0.22s ease;
    }

    .promo-contact-item:hover {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(229, 9, 20, 0.5);
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
    }

    .promo-icon-box {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .promo-icon-box.email-icon-box {
      background: rgba(234, 67, 53, 0.15);
      border: 1px solid rgba(234, 67, 53, 0.35);
      color: #EA4335;
    }

    .promo-icon-box.telegram-icon-box {
      background: rgba(34, 158, 217, 0.15);
      border: 1px solid rgba(34, 158, 217, 0.35);
      color: #229ED9;
    }

    .promo-contact-info {
      display: flex;
      flex-direction: column;
      gap: 2px;
      overflow: hidden;
    }

    .promo-contact-label {
      font-size: 0.68rem;
      font-weight: 800;
      letter-spacing: 0.1em;
      color: #888888;
      text-transform: uppercase;
    }

    .promo-contact-val {
      font-size: 0.88rem;
      font-weight: 700;
      color: #FFFFFF;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    @media (max-width: 640px) {
      .portfolio-promo-card {
        padding: 24px 20px;
      }
      .promo-contacts-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 640px) {
      .form-row-2col {
        grid-template-columns: 1fr;
      }
      .contact-form-wrapper {
        padding: 24px 20px;
      }
      .btn-submit-message {
        width: 100%;
        justify-content: center;
      }
    }

    .next-ep-social-pill {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: rgba(255, 255, 255, 0.07);
      border: 1px solid rgba(255, 255, 255, 0.18);
      color: #E5E5E5;
      padding: 10px 22px;
      border-radius: 30px;
      font-size: 0.92rem;
      font-weight: 700;
      text-decoration: none;
      letter-spacing: 0.8px;
      text-transform: uppercase;
      transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
    }

    .next-ep-social-pill:hover {
      background: rgba(229, 9, 20, 0.2);
      border-color: #E50914;
      color: #FFFFFF;
      transform: translateY(-3px);
      box-shadow: 0 8px 24px rgba(229, 9, 20, 0.35);
    }

    .next-ep-icon {
      width: 18px;
      height: 18px;
      fill: currentColor;
    }

    /* Watch Again & Replay Opening Action Buttons */
    .next-ep-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      justify-content: center;
      align-items: center;
    }

    .btn-watch-again {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: #FFFFFF;
      color: #000000;
      border: none;
      padding: 13px 30px;
      font-size: 1.05rem;
      font-weight: 800;
      font-family: inherit;
      border-radius: 4px;
      cursor: pointer;
      text-decoration: none;
      transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    }

    .btn-watch-again:hover {
      background: rgba(255, 255, 255, 0.82);
      transform: scale(1.03);
      box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3);
    }

    .btn-replay-opening {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: rgba(109, 109, 110, 0.7);
      color: #FFFFFF;
      border: none;
      padding: 13px 28px;
      font-size: 1.05rem;
      font-weight: 700;
      font-family: inherit;
      border-radius: 4px;
      cursor: pointer;
      text-decoration: none;
      backdrop-filter: blur(6px);
      transition: background 0.2s ease, transform 0.2s ease;
    }

    .btn-replay-opening:hover {
      background: rgba(109, 109, 110, 0.45);
      transform: scale(1.03);
    }

    /* ================= DEDICATED SOCIAL CHANNELS SECTION (COMPACT PILLS) ================= */
    /* ================= ORIGINAL SOCIAL MEDIA ICON BUTTONS ================= */
    .social-channels-wrapper {
      width: 100%;
      margin: 6px auto 26px auto;
      padding: 0 10px;
      text-align: center;
    }

    .social-channels-header {
      display: none;
    }

    .social-channels-grid {
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      justify-content: center !important;
      align-items: center !important;
      gap: 14px !important;
      margin: 0 !important;
    }

    .social-channel-card {
      width: 44px !important;
      height: 44px !important;
      min-width: 44px !important;
      max-width: 44px !important;
      border-radius: 50% !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      text-decoration: none !important;
      transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease, filter 0.25s ease !important;
      position: relative !important;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5) !important;
      flex-shrink: 0 !important;
      padding: 0 !important;
      overflow: hidden !important;
    }

    .social-channel-card svg {
      width: 22px !important;
      height: 22px !important;
      fill: #FFFFFF !important;
      display: block !important;
      transition: transform 0.2s ease !important;
    }

    .social-channel-card:hover {
      transform: translateY(-4px) scale(1.12) !important;
    }

    .social-channel-card:hover svg {
      transform: scale(1.08) !important;
    }

    /* Original Telegram Style */
    .card-telegram {
      background: #229ED9 !important;
      border: 1px solid rgba(255, 255, 255, 0.2) !important;
    }
    .card-telegram:hover {
      box-shadow: 0 8px 25px rgba(34, 158, 217, 0.6) !important;
    }

    /* Original Instagram Style */
    .card-instagram {
      background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important;
      border: 1px solid rgba(255, 255, 255, 0.2) !important;
    }
    .card-instagram:hover {
      box-shadow: 0 8px 25px rgba(225, 48, 108, 0.6) !important;
    }

    /* Original LinkedIn Style */
    .card-linkedin {
      background: #0A66C2 !important;
      border: 1px solid rgba(255, 255, 255, 0.2) !important;
    }
    .card-linkedin:hover {
      box-shadow: 0 8px 25px rgba(10, 102, 194, 0.6) !important;
    }

    /* Original GitHub Style */
    .card-github {
      background: #24292e !important;
      border: 1px solid rgba(255, 255, 255, 0.25) !important;
    }
    .card-github:hover {
      box-shadow: 0 8px 25px rgba(255, 255, 255, 0.35) !important;
    }

    /* Original Email Style */
    .card-email {
      background: #EA4335 !important;
      border: 1px solid rgba(255, 255, 255, 0.2) !important;
    }
    .card-email:hover {
      box-shadow: 0 8px 25px rgba(234, 67, 53, 0.6) !important;
    }

    @media (max-width: 640px) {
      .social-channels-grid {
        gap: 10px !important;
      }
      .social-channel-card {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
      }
      .social-channel-card svg {
        width: 20px !important;
        height: 20px !important;
      }
    }

    @media print {
      body * {
        visibility: hidden;
      }
      #printResumeArea, #printResumeArea * {
        visibility: visible;
      }
      #printResumeArea {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        margin: 0;
        padding: 20px;
        background: #fff !important;
        color: #000 !important;
      }
    }