@charset "utf-8";



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



html { scroll-behavior: smooth; }



body { font-family: Roboto, sans-serif; background-color: rgb(61, 64, 62); color: rgb(0, 128, 255); line-height: 1.7; }



a { text-decoration: none; color: inherit; }



.container { max-width: 1100px; margin: 0px auto; padding: 0px 20px; }



.header { background-color: rgb(26, 26, 26); padding: 15px 0px; }



.header .container { display: flex; justify-content: space-between; align-items: center; }



.logo-section { display: flex; align-items: center; gap: 10px; }



.logo-section img { width: 40px; height: 40px; object-fit: contain; }



.logo-section span { font-size: 24px; font-weight: 700; color: rgb(0, 128, 255); }



.nav-links { display: flex; align-items: center; gap: 40px; }



.nav-links a { font-size: 16px; font-weight: 500; color: rgb(0, 128, 255); transition: color 0.3s; }



.nav-links a:hover { color: rgb(12, 148, 228); }



.nav-dropdown { position: relative; }



.nav-dropdown-toggle { font-size: 16px; font-weight: 500; color: rgb(0, 128, 255); cursor: pointer; display: flex; align-items: center; gap: 5px; transition: color 0.3s; }



.nav-dropdown-toggle svg { width: 12px; height: 12px; fill: rgb(255, 255, 255); transition: transform 0.3s; }



.nav-dropdown:hover .nav-dropdown-toggle svg { transform: rotate(180deg); }



.nav-dropdown-menu { position: absolute; top: 100%; right: 0px; margin-top: 10px; background-color: rgb(26, 26, 26); border: 1px solid rgb(68, 68, 68); border-radius: 4px; min-width: 200px; opacity: 0; visibility: hidden; transform: translateY(-5px); transition: opacity 0.25s, visibility 0.25s, transform 0.25s; z-index: 100; }



.nav-dropdown:hover .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0px); }



.nav-dropdown-menu a { display: block; padding: 10px 20px; font-size: 14px; font-weight: 400; color: rgb(0, 128, 255); transition: background-color 0.2s, color 0.2s; }



.nav-dropdown-menu a:hover { background-color: rgb(51, 53, 56); color: rgb(0, 128, 255); }



.menu-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 30px; height: 30px; cursor: pointer; z-index: 101; }



.menu-toggle span { display: block; width: 24px; height: 2px; background-color: rgb(0, 128, 255); border-radius: 2px; transition: transform 0.3s, opacity 0.3s; }



.menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }



.menu-toggle.active span:nth-child(2) { opacity: 0; }



.menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }



.toc { background-color: rgb(34, 34, 34); border-radius: 8px; overflow: hidden; margin-top: 30px; }



.toc-header { background-color: rgb(12, 148, 228); height: 6px; }



.toc-list { list-style: none; padding: 0px; margin: 0px; }



.toc-list li { border-bottom: 1px solid rgb(68, 68, 68); }



.toc-list li:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }



.toc-list li a { display: block; padding: 12px 25px; color: rgb(0, 128, 255); font-size: 16px; font-weight: 500; transition: background-color 0.2s; }



.toc-list li a:hover { background-color: rgb(58, 61, 64); }



.toc-list li.toc-sub a { padding-left: 50px; font-size: 16px; font-weight: 400; }



.toc-list li.toc-sub-deep a { padding-left: 75px; font-size: 16px; font-weight: 400; }



.main-content { padding: 30px 0px; }



.main-content .container { padding: 30px 20px; background-color: rgb(51, 53, 56); }



.hero-section { display: flex; background-color: rgb(34, 34, 34); border: 3px solid rgb(12, 148, 228); border-radius: 8px; padding: 40px; gap: 40px; align-items: center; margin-bottom: 40px; }



.hero-logo { flex-shrink: 0; }



.hero-logo img { width: 180px; height: 180px; object-fit: contain; }



.hero-content { flex: 1 1 0%; }



.hero-content h1 { font-size: 32px; font-weight: 700; color: rgb(0, 128, 255); margin-bottom: 20px; }



.hero-content p { font-size: 16px; color: rgb(0, 128, 255); margin-bottom: 20px; line-height: 1.8; }



.version-info { font-size: 16px; font-weight: 700; color: rgb(0, 128, 255); margin-bottom: 25px; text-align: center; }



.download-btn { display: block; width: 220px; margin: 0px auto; padding: 14px 40px; background: linear-gradient(rgb(11, 217, 224) 0%, rgb(12, 148, 228) 50%, rgb(6, 107, 202) 100%); color: rgb(0, 128, 255); font-size: 20px; font-weight: 700; text-align: center; border-radius: 35px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; cursor: pointer; box-shadow: rgba(230, 168, 23, 0.5) 0px 0px 20px, rgba(230, 168, 23, 0.25) 0px 0px 40px; transition: 0.3s; }



.download-btn:hover { background: linear-gradient(rgb(6, 107, 202) 0%, rgb(12, 148, 228) 50%, rgb(11, 217, 224) 100%); box-shadow: rgba(230, 168, 23, 0.7) 0px 0px 25px, rgba(230, 168, 23, 0.35) 0px 0px 50px; transform: scale(1.05); }



.description-section { margin-bottom: 30px; }



.description-section p { font-size: 16px; color: rgb(0, 128, 255); line-height: 1.8; margin-bottom: 20px; }



.description-section a { text-decoration: underline; }



.description-section a:hover { color: rgb(245, 184, 46); }



.section-title { background-color: rgb(243, 192, 0); color: rgb(0, 0, 0); font-size: 22px; font-weight: 700; padding: 15px 30px; border-radius: 8px; margin: 40px 0px 30px; text-align: center; }



.screenshots-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 30px 0px; }



.screenshot-item { border-radius: 12px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 15px; }



.screenshot-item img { width: 100%; height: auto; display: block; }



.steps-list { margin: 20px 0px; padding-left: 25px; }



.steps-list li { font-size: 16px; color: rgb(0, 128, 255); margin-bottom: 12px; line-height: 1.8; }



.info-box { background-color: rgb(30, 74, 61); border-left: 4px solid rgb(46, 125, 90); padding: 20px 25px; margin: 30px 0px; border-radius: 0px 8px 8px 0px; }



.info-box p { color: rgb(74, 222, 128); font-size: 16px; line-height: 1.7; }



.features-intro { font-size: 16px; color: rgb(0, 128, 255); line-height: 1.8; margin-bottom: 30px; }



.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 40px; }



.feature-card { background-color: rgb(39, 41, 43); border: 2px solid rgb(58, 61, 64); border-radius: 12px; padding: 25px 20px; text-align: center; transition: border-color 0.3s; }



.feature-card:hover { border-color: rgb(12, 148, 228); }



.feature-card.active { border-color: rgb(12, 148, 228); }



.feature-icon { width: 120px; height: 120px; margin: 0px auto 20px; display: flex; align-items: center; justify-content: center; }



.feature-icon img { width: 100%; height: 100%; object-fit: contain; }



.feature-card h3 { font-size: 18px; font-weight: 700; color: rgb(0, 128, 255); margin-bottom: 15px; }



.feature-card p { font-size: 14px; color: rgb(170, 170, 170); line-height: 1.7; }



.extra-features-list { margin: 20px 0px; padding-left: 25px; }



.extra-features-list li { font-size: 16px; color: rgb(0, 128, 255); margin-bottom: 15px; line-height: 1.8; }



.extra-features-list li strong { color: rgb(0, 128, 255); }



.logo-center { text-align: center; margin: 40px 0px; }



.logo-center img { width: 120px; height: auto; }



.download-section-title { background-color: rgb(12, 148, 228); color: rgb(0, 0, 0); font-size: 22px; font-weight: 700; padding: 15px 30px; border-radius: 8px; margin: 40px 0px 0px; text-align: center; }



.download-table { width: 100%; border-collapse: collapse; margin-top: 25px; margin-bottom: 30px; border: 1px solid rgb(85, 85, 85); }



.download-table tr { border-bottom: 1px solid rgb(85, 85, 85); }



.download-table tr:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }



.download-table td { padding: 15px 20px; font-size: 16px; background-color: rgb(51, 53, 56); border: 1px solid rgb(85, 85, 85); }



.download-table td:first-child { width: 50%; color: rgb(0, 128, 255); font-weight: 400; font-style: italic; }



.download-table td:last-child { color: rgb(0, 128, 255); }



.download-btn-large { display: block; width: 420px; max-width: 90%; margin: 30px auto; padding: 16px 60px; background: linear-gradient(rgb(245, 200, 66) 0%, rgb(230, 168, 23) 50%, rgb(212, 148, 15) 100%); color: rgb(0, 0, 0); font-size: 18px; font-weight: 700; font-style: italic; text-align: center; border-radius: 35px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; cursor: pointer; box-shadow: rgba(230, 168, 23, 0.4) 0px 4px 15px, rgba(255, 255, 255, 0.3) 0px 2px 0px inset; transition: 0.3s; white-space: nowrap; }



.download-btn-large:hover { background: linear-gradient(rgb(255, 213, 79) 0%, rgb(245, 184, 46) 50%, rgb(230, 168, 23) 100%); transform: scale(1.05); box-shadow: rgba(230, 168, 23, 0.5) 0px 6px 20px, rgba(255, 255, 255, 0.3) 0px 2px 0px inset; }



.install-intro { font-size: 16px; color: rgb(0, 128, 255); line-height: 1.8; margin-bottom: 40px; }



.step-section { margin-bottom: 50px; }



.step-title { font-size: 22px; font-weight: 700; color: rgb(0, 128, 255); text-align: center; margin-bottom: 25px; }



.step-list { margin: 20px 0px 30px; padding-left: 25px; }



.step-list li { font-size: 16px; color: rgb(0, 128, 255); margin-bottom: 12px; line-height: 1.8; font-style: italic; }



.step-list li strong { color: rgb(0, 128, 255); font-style: normal; }



.step-image { display: flex; justify-content: center; margin: 30px 0px; }



.step-image img { max-width: 320px; width: 100%; height: auto; border-radius: 20px; box-shadow: rgba(0, 0, 0, 0.5) 0px 10px 30px; }



.smarttv-intro { font-size: 16px; color: rgb(0, 128, 255); line-height: 1.8; margin-bottom: 25px; }



.smarttv-steps { margin: 20px 0px; padding-left: 25px; }



.smarttv-steps li { font-size: 16px; color: rgb(0, 128, 255); margin-bottom: 15px; line-height: 1.8; }



.smarttv-steps li strong { color: rgb(0, 128, 255); }



.alternatives-intro { font-size: 16px; color: rgb(0, 128, 255); line-height: 1.8; margin-bottom: 25px; }



.alternatives-list { margin: 20px 0px; padding-left: 25px; list-style-type: decimal; }



.alternatives-list li { font-size: 16px; color: rgb(0, 128, 255); margin-bottom: 18px; line-height: 1.8; }



.alternatives-list li strong { color: rgb(0, 128, 255); }



.faq-container { margin-top: 30px; }



.faq-item { background-color: rgb(39, 41, 43); border-width: 1px 1px 1px 3px; border-style: solid; border-color: rgb(68, 68, 68) rgb(68, 68, 68) rgb(68, 68, 68) rgb(12, 148, 228); border-image: none; margin-bottom: 15px; border-radius: 4px; overflow: hidden; }



.faq-question { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; cursor: pointer; transition: background-color 0.3s; }



.faq-question:hover { background-color: rgb(51, 53, 56); }



.faq-question h4 { font-size: 16px; font-weight: 500; color: rgb(0, 128, 255); margin: 0px; }



.faq-icon { font-size: 24px; color: rgb(0, 128, 255); font-weight: 300; transition: transform 0.3s; }



.faq-item.active .faq-icon { transform: rotate(45deg); }



.faq-answer { max-height: 0px; overflow: hidden; transition: max-height 0.3s ease-out; background-color: rgb(31, 33, 35); }



.faq-item.active .faq-answer { max-height: 300px; }



.faq-answer p { padding: 20px; font-size: 15px; color: rgb(170, 170, 170); line-height: 1.7; margin: 0px; }



.conclusion-text { font-size: 16px; color: rgb(0, 128, 255); line-height: 1.8; margin-bottom: 25px; }



.footer { background-color: rgb(39, 41, 43); padding: 20px 0px; margin-top: 50px; text-align: center; }



.footer p { font-size: 14px; color: rgb(136, 136, 136); }



.footer a { color: rgb(0, 128, 255); text-decoration: none; }



.footer a:hover { text-decoration: underline; }



@media (max-width: 1024px) {

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

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

}



@media (max-width: 768px) {

  .container { padding: 0px 15px; }

  .menu-toggle { display: flex; }

  .nav-links { display: none; position: absolute; top: 100%; left: 0px; right: 0px; background-color: rgb(26, 26, 26); flex-direction: column; gap: 0px; padding: 0px; border-top: 1px solid rgb(51, 51, 51); box-shadow: rgba(0, 0, 0, 0.4) 0px 10px 30px; z-index: 100; }

  .nav-links.active { display: flex; }

  .nav-links a { padding: 14px 20px; border-bottom: 1px solid rgb(42, 42, 42); font-size: 15px; }

  .nav-links a:hover { background-color: rgb(39, 39, 39); }

  .nav-dropdown { border-bottom: 1px solid rgb(42, 42, 42); }

  .nav-dropdown-toggle { padding: 14px 20px; }

  .nav-dropdown-menu { position: static; opacity: 1; visibility: visible; transform: none; display: none; margin-top: 0px; background-color: rgb(20, 20, 20); border-width: 1px medium medium; border-style: solid none none; border-color: rgb(42, 42, 42) currentcolor currentcolor; border-image: none; border-radius: 0px; min-width: auto; }

  .nav-dropdown.active .nav-dropdown-menu { display: block; }

  .nav-dropdown:hover .nav-dropdown-menu { display: none; opacity: 1; visibility: visible; transform: none; }

  .nav-dropdown.active .nav-dropdown-menu { display: block; }

  .nav-dropdown-menu a { padding: 12px 20px 12px 40px; border-bottom: 1px solid rgb(34, 34, 34); }

  .nav-dropdown-menu a:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }

  .header .container { position: relative; }

  .main-content { padding: 20px 0px; }

  .hero-section { flex-direction: column; padding: 30px 20px; text-align: center; }

  .hero-logo img { width: 140px; height: 140px; }

  .hero-content h1 { font-size: 24px; }

  .screenshots-gallery { grid-template-columns: repeat(2, 1fr); gap: 15px; }

  .section-title { font-size: 18px; padding: 12px 20px; }

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

  .download-btn-large { width: 100%; max-width: 280px; }

}



@media (max-width: 480px) {

  .logo-section span { font-size: 20px; }

  .screenshots-gallery { grid-template-columns: 1fr 1fr; }

  .hero-content h1 { font-size: 20px; }

  .download-btn { width: 160px; padding: 10px 30px; font-size: 16px; }

}