:root {


    --bg-main: #0a0a0a;


    --bg-alt: #141414;


    --bg-card: #1a1a1a;


    --text-primary: #ffffff;


    --text-secondary: #aaaaaa;


    --accent: #00F0FF;


    


    --accent-hover: #00B3FF;


    --border: #333333;


    --radius: 4px;


    


    --max-w-content: 800px;


    --shadow: 0 4px 12px rgba(0, 0, 0, 0.5);


    --bottom-bar-height: 70px;


}





* {


    box-sizing: border-box;


    margin: 0;


    padding: 0;


}





body {


    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;


    background-color: var(--bg-main);


    color: var(--text-primary);


    line-height: 1.6;


    -webkit-font-smoothing: antialiased;


    padding-bottom: calc(var(--bottom-bar-height) + env(safe-area-inset-bottom));


}





img {


    max-width: 100%;


    height: auto;


    display: block;


}





a {


    color: var(--accent);


    text-decoration: none;


    transition: color 0.2s;


}





a:hover {


    color: var(--accent-hover);


}








.container {


    max-width: var(--max-w-content);


    width: 100%;


    margin: 0 auto;


    padding: 0 1rem;


}





section {


    width: 100%;


    padding: 4rem 0;


    border-bottom: 1px solid var(--border);


}





section:last-of-type {


    border-bottom: none;


}








header {


    background-color: var(--bg-main);


    border-bottom: 1px solid var(--border);


    padding: 1rem 0;


    position: relative;


    


    position: sticky;


    top: 0;


    z-index: 1000;


}





.header-inner {


    max-width: var(--max-w-content);


    margin: 0 auto;


    padding: 0 1rem;


    display: flex;


    justify-content: space-between;


    align-items: center;


}





.logo-img {


    height: 40px;


    width: auto;


    object-fit: contain;


}





.lang-switcher {


    display: flex;


    align-items: center;


    gap: 8px;


    font-weight: 500;


    font-size: 0.9rem;


    cursor: pointer;


    color: var(--text-secondary);


}








.lang-dropdown {


    position: relative;


}





.lang-list { max-height: 250px; overflow-y: auto;


    display: none;


    position: absolute;


    right: 0;


    top: 100%;


    background: var(--bg-card);


    border: 1px solid var(--border);


    border-radius: var(--radius);


    list-style: none;


    padding: 0.5rem 0;


    width: 120px;


    z-index: 10;


}





.lang-dropdown:hover .lang-list { max-height: 250px; overflow-y: auto;


    display: block;


}





.lang-list li {


    padding: 0.5rem 1rem;


    cursor: pointer;


    display: flex;


    align-items: center;


    gap: 8px;


    font-size: 0.9rem;


    color: var(--text-primary);


}





.lang-list li:hover {


    background: var(--border);


}





.flag-icon {


    width: 20px;


    height: 15px;


    border-radius: 2px;


}








.hero {


    position: relative;


    width: 100%;


    padding: 6rem 0;


    background-size: cover;


    background-position: center;


    border-bottom: 1px solid var(--border);


    


    background-color: var(--bg-alt);


}





.hero::before {


    content: '';


    position: absolute;


    inset: 0;


    background: rgba(10, 10, 10, 0.85);


    


    z-index: 1;


}





.hero-content {


    position: relative;


    z-index: 2;


    text-align: left;


}





.hero h1 {


    font-size: 3rem;


    line-height: 1.1;


    margin-bottom: 1.5rem;


    letter-spacing: -0.02em;


    color: #fff;


}





.hero p.lead {


    font-size: 1.2rem;


    color: var(--text-secondary);


    margin-bottom: 2rem;


    max-width: 650px;


}





.hero-link-cta {


    font-weight: 600;


    font-size: 1.1rem;


    display: inline-flex;


    align-items: center;


    gap: 0.5rem;


}





.hero-link-cta::after {


    content: "\2192";


    transition: transform 0.2s;


}





.hero-link-cta:hover::after {


    transform: translateX(4px);


}








h2 {


    font-size: 2rem;


    margin: 0 0 1.5rem 0;


    letter-spacing: -0.01em;


    color: #fff;


}





h3 {


    font-size: 1.35rem;


    margin: 2rem 0 1rem;


    color: #fff;


}





p {


    margin-bottom: 1.5rem;


    color: var(--text-secondary);


}





ul,


ol {


    margin-bottom: 1.5rem;


    padding-left: 1.5rem;


    color: var(--text-secondary);


}





li {


    margin-bottom: 0.5rem;


    line-height: 1.5;


}





strong {


    color: var(--text-primary);


    font-weight: 600;


}








details.toc {


    background: var(--bg-card);


    border: 1px solid var(--border);


    border-radius: var(--radius);


    padding: 1.5rem;


    margin-bottom: 3rem;


    box-shadow: var(--shadow);


}





details.toc summary {


    font-size: 1.1rem;


    font-weight: 600;


    cursor: pointer;


    list-style: none;


    display: flex;


    justify-content: space-between;


    align-items: center;


    color: var(--text-primary);


}





details.toc summary::after {


    content: "\25BC";


    font-size: 0.8rem;


    transition: transform 0.2s;


    color: var(--text-secondary);


}





details[open].toc summary::after {


    transform: rotate(180deg);


}





details.toc ul {


    margin-top: 1rem;


    list-style: none;


    padding-left: 0;


}





details.toc li {


    margin-bottom: 0.5rem;


}





details.toc a {


    color: var(--text-secondary);


    font-weight: 500;


    font-size: 0.95rem;


}





details.toc a:hover {


    color: var(--accent);


}








.facts-grid {


    display: grid;


    grid-template-columns: repeat(2, 1fr);


    gap: 1.5rem;


    background: var(--bg-card);


    padding: 2rem;


    border-radius: var(--radius);


    border: 1px solid var(--border);


}





@media (min-width: 600px) {


    .facts-grid {


        grid-template-columns: repeat(3, 1fr);


    }


}





.fact-item {


    display: flex;


    flex-direction: column;


    gap: 0.25rem;


}





.fact-label {


    font-size: 0.85rem;


    color: var(--text-secondary);


    text-transform: uppercase;


    letter-spacing: 0.05em;


    font-weight: 600;


}





.fact-value {


    font-size: 1.1rem;


    color: var(--text-primary);


    font-weight: 500;


}





.sources-list {


    font-size: 0.85rem;


    color: var(--text-secondary);


    margin-top: 1.5rem;


    padding-top: 1.5rem;


    border-top: 1px solid var(--border);


}








figure {


    margin: 2.5rem 0;


    width: 100%;


    border-radius: var(--radius);


    overflow: hidden;


    border: 1px solid var(--border);


}





figure img {


    width: 100%;


    height: auto;


    display: block;


}





figcaption {


    padding: 1rem;


    font-size: 0.85rem;


    color: var(--text-secondary);


    background: var(--bg-card);


    text-align: center;


    border-top: 1px solid var(--border);


}








.demo-wrapper {


    position: relative;


    width: 100%;


    padding-bottom: 56.25%;


    


    background: #000;


    border-radius: var(--radius);


    overflow: hidden;


    margin: 2.5rem 0;


    box-shadow: var(--shadow);


    border: 1px solid var(--border);


}





@media (max-width: 768px) {


    .demo-wrapper {


        padding-bottom: 177.78%;


    }





    


}





.demo-iframe {


    position: absolute;


    inset: 0;


    width: 100%;


    height: 100%;


    border: none;


}





.demo-overlay {


    position: absolute;


    inset: 0;


    display: flex;


    justify-content: center;


    align-items: center;


    z-index: 10;


    background: rgba(0, 0, 0, 0.8);


    backdrop-filter: blur(4px);


}





.demo-bg {


    position: absolute;


    inset: 0;


    width: 100%;


    height: 100%;


    object-fit: cover;


    z-index: -1;


    opacity: 0.4;


}





.btn-play-demo {


    background-color: transparent;


    border: 2px solid var(--accent);


    color: var(--accent);


    padding: 0.75rem 2rem;


    font-size: 1.1rem;


    font-weight: 600;


    border-radius: var(--radius);


    cursor: pointer;


    transition: all 0.2s ease;


    display: inline-flex;


    align-items: center;


    gap: 0.5rem;


}





.btn-play-demo:hover {


    background-color: var(--accent);


    color: #000;


}








.pc-grid {


    display: grid;


    grid-template-columns: 1fr;


    gap: 2rem;


    margin: 2.5rem 0;


}





@media (min-width: 600px) {


    .pc-grid {


        grid-template-columns: 1fr 1fr;


    }


}





.pc-card h4 {


    font-size: 1.2rem;


    margin-bottom: 1.5rem;


    padding-bottom: 0.5rem;


    border-bottom: 1px solid var(--border);


    color: #fff;


}





.pc-card.pros h4 {


    border-color: #2E7D32;


}





.pc-card.cons h4 {


    border-color: #C62828;


}





.pc-card ul {


    padding-left: 1.5rem;


    list-style-type: disc;


}





.pc-card.pros li::marker {


    color: #2E7D32;


}





.pc-card.cons li::marker {


    color: #C62828;


}








.faq-list {


    width: 100%;


    border-top: 1px solid var(--border);


}





.faq-item {


    border-bottom: 1px solid var(--border);


}





.faq-item summary {


    font-weight: 600;


    cursor: pointer;


    list-style: none;


    font-size: 1.1rem;


    color: var(--text-primary);


    padding: 1.5rem 0;


    position: relative;


    padding-right: 2rem;


}





.faq-item summary::after {


    content: "+";


    position: absolute;


    right: 0;


    top: 1.5rem;


    font-size: 1.4rem;


    font-weight: normal;


    color: var(--accent);


    line-height: 1;


}





.faq-item[open] summary::after {


    content: "\2212";


}





.faq-item p {


    margin-top: 0;


    padding-bottom: 1.5rem;


    color: var(--text-secondary);


}








.eeat-meta-row {


    display: flex;


    flex-wrap: wrap;


    gap: 1.5rem;


    margin-top: 2rem;


    padding: 1.5rem;


    background: var(--bg-card);


    border: 1px solid var(--border);


    border-radius: var(--radius);


}





.eeat-item {


    display: flex;


    flex-direction: column;


    gap: 0.2rem;


    flex: 1;


    min-width: 150px;


}





.eeat-label {


    font-size: 0.8rem;


    text-transform: uppercase;


    letter-spacing: 0.05em;


    color: var(--text-secondary);


}





.eeat-value {


    font-size: 0.95rem;


    color: var(--text-primary);


}





.eeat-bio {


    width: 100%;


    margin-top: 1rem;


    padding-top: 1rem;


    border-top: 1px solid var(--border);


    font-size: 0.9rem;


    color: var(--text-secondary);


}








footer {


    padding: 3rem 0;


    background-color: var(--bg-main);


    color: var(--text-secondary);


    font-size: 0.85rem;


    text-align: center;


    border-top: 1px solid var(--border);


}





.footer-links {


    margin-bottom: 1.5rem;


    display: flex;


    flex-wrap: wrap;


    justify-content: center;


    gap: 1.5rem;


}





.footer-links a {


    font-weight: 500;


}





footer p {


    margin-bottom: 1rem;


}





.copyright {


    margin-top: 2rem;


    font-size: 0.8rem;


}








.bottom-cta-bar {


    position: fixed;


    bottom: 0;


    left: 0;


    width: 100%;


    height: var(--bottom-bar-height);


    background-color: var(--bg-card);


    border-top: 1px solid var(--border);


    display: flex;


    justify-content: center;


    align-items: center;


    z-index: 9999;


    padding: 0 1rem;


    padding-bottom: env(safe-area-inset-bottom);


}





.bottom-cta-inner {


    max-width: var(--max-w-content);


    width: 100%;


    display: flex;


    justify-content: space-between;


    align-items: center;


}





.cta-label {


    font-size: 0.95rem;


    color: var(--text-primary);


    font-weight: 500;


}





.btn-primary {


    background-color: #fff;


    color: #000;


    font-weight: 600;


    padding: 0.6rem 1.5rem;


    border-radius: var(--radius);


    text-align: center;


    border: 1px solid transparent;


    cursor: pointer;


    transition: all 0.2s ease;


}





.btn-primary:hover {


    background-color: var(--text-secondary);


    color: #000;


    text-decoration: none;


}





.btn-close-cta {


    background: none;


    border: none;


    color: var(--text-secondary);


    font-size: 1.2rem;


    cursor: pointer;


    margin-left: 1rem;


}





.btn-close-cta:hover {


    color: #fff;


}








.mobile-menu-toggle {


    display: none;


    background: none;


    border: none;


    cursor: pointer;


    flex-direction: column;


    gap: 5px;


    width: 28px;


    height: 21px;


    margin-left: auto;


    margin-right: 15px;


}





.mobile-menu-toggle span {


    display: block;


    width: 100%;


    height: 2px;


    background-color: var(--text-primary);


    border-radius: 1px;


}





@media (max-width: 768px) {


    .mobile-menu-toggle {


        display: flex;


    }





    .hero h1 {


        font-size: 2.2rem;


    }





    .hero {


        padding: 4rem 0;


    }





    .bottom-cta-bar .cta-label {


        display: none;


    }





    


    .bottom-cta-inner {


        justify-content: center;


    }





    .btn-close-cta {


        position: absolute;


        right: 1rem;


    }


}