/* Non-critical CSS - loaded async */

/* Games Section */
.games {
            padding: 8rem 2rem;
            background: var(--darker);
        }

        .section-header {
            text-align: center;
            max-width: 700px;
            margin: 0 auto 4rem;
        }

        .section-label {
            display: inline-block;
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--primary);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 1rem;
        }

        .section-title {
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 800;
            margin-bottom: 1rem;
        }

        .section-desc {
            color: var(--gray-600);
            font-size: 1.1rem;
        }

        .games-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
            gap: 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        .game-card {
            background: rgba(30, 41, 59, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 24px;
            overflow: hidden;
            transition: all 0.4s ease;
        }

        .game-card:hover {
            transform: translateY(-10px);
            border-color: rgba(99, 102, 241, 0.3);
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
        }

        .game-carousel {
            position: relative;
            overflow: hidden;
            height: 400px;
        }

        .carousel-track {
            display: flex;
            gap: 8px;
            height: 100%;
            animation: marquee 15s linear infinite;
        }

        .carousel-track:hover {
            animation-play-state: paused;
        }

        .carousel-track picture {
            flex-shrink: 0;
            height: 100%;
        }

        .carousel-track .game-image {
            height: 100%;
            width: auto;
            object-fit: cover;
            display: block;
        }

        @keyframes marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        
        .carousel-dots {
            position: absolute;
            bottom: 1rem;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 0.5rem;
            z-index: 10;
        }
        
        .carousel-dots .dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(255,255,255,0.4);
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .carousel-dots .dot.active {
            background: var(--primary);
            transform: scale(1.3);
        }
        
        .carousel-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(0,0,0,0.5);
            color: white;
            border: none;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10;
            transition: all 0.3s;
        }
        
        .carousel-btn:hover {
            background: var(--primary);
        }
        
        .carousel-btn.prev { left: 1rem; }
        .carousel-btn.next { right: 1rem; }

        .game-content {
            padding: 2rem;
        }

        .game-tags {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }

        .game-tag {
            background: rgba(99, 102, 241, 0.1);
            color: var(--primary);
            padding: 0.25rem 0.75rem;
            border-radius: 50px;
            font-size: 0.75rem;
            font-weight: 600;
        }

        .game-tag:nth-child(2) {
            background: rgba(236, 72, 153, 0.1);
            color: var(--secondary);
        }

        .game-title {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
        }

        .game-desc {
            color: var(--gray-300);
            font-size: 0.95rem;
            line-height: 1.7;
            margin-bottom: 1.5rem;
        }

        .game-features {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        .game-feature {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            font-size: 0.85rem;
            color: var(--gray-600);
        }

        .game-feature svg {
            width: 16px;
            height: 16px;
            color: var(--accent);
        }

        /* About Section */
        .about {
            padding: 8rem 2rem;
            background: var(--dark);
        }

        .about-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            max-width: 1200px;
            margin: 0 auto;
            align-items: center;
        }

        .about-visual {
            position: relative;
        }

        .about-image-container {
            position: relative;
            border-radius: 24px;
            overflow: hidden;
        }

        .about-main-image {
            width: 100%;
            height: 400px;
            object-fit: cover;
            display: block;
        }

        .about-accent {
            position: absolute;
            top: -20px;
            right: -20px;
            width: 200px;
            height: 200px;
            background: var(--gradient-primary);
            border-radius: 24px;
            opacity: 0.2;
            z-index: -1;
        }

        .about-stats-card {
            position: absolute;
            bottom: -30px;
            right: -30px;
            background: var(--gray-800);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 16px;
            padding: 1.5rem;
        }

        .about-stat {
            display: flex;
            align-items: baseline;
            gap: 0.5rem;
            margin-bottom: 0.75rem;
        }

        .about-stat:last-child {
            margin-bottom: 0;
        }

        .about-stat-number {
            font-size: 2rem;
            font-weight: 800;
            color: var(--primary);
        }

        .about-stat-label {
            font-size: 0.85rem;
            color: var(--gray-600);
        }

        .about-content {
            padding-right: 2rem;
        }

        .about-content .section-label {
            text-align: left;
        }

        .about-content .section-title {
            text-align: left;
            margin-bottom: 1.5rem;
        }

        .about-text {
            color: var(--gray-300);
            font-size: 1.1rem;
            line-height: 1.8;
            margin-bottom: 2rem;
        }

        .about-values {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }

        .about-value {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
        }

        .about-value-icon {
            width: 32px;
            height: 32px;
            background: rgba(99, 102, 241, 0.1);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .about-value-icon svg {
            width: 16px;
            height: 16px;
            color: var(--primary);
        }

        .about-value-text {
            font-size: 0.9rem;
            color: var(--gray-300);
        }

        /* Values Section */
        .values {
            padding: 8rem 2rem;
            background: var(--darker);
        }

        .values-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 1.5rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        .value-card {
            background: rgba(30, 41, 59, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.03);
            border-radius: 20px;
            padding: 2rem;
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
        }

        .value-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: var(--gradient-primary);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .value-card:hover {
            background: rgba(30, 41, 59, 0.5);
            border-color: rgba(99, 102, 241, 0.2);
            transform: translateY(-5px);
        }

        .value-card:hover::before {
            opacity: 1;
        }

        .value-number {
            font-size: 3rem;
            font-weight: 800;
            color: rgba(99, 102, 241, 0.15);
            line-height: 1;
            margin-bottom: 1rem;
        }

        .value-title {
            font-size: 1.25rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }

        .value-subtitle {
            font-size: 0.9rem;
            color: var(--primary);
            font-weight: 600;
            margin-bottom: 1rem;
        }

        .value-desc {
            color: var(--gray-600);
            font-size: 0.95rem;
            line-height: 1.7;
        }

        /* Principles Section */
        .principles {
            padding: 8rem 2rem;
            background: var(--dark);
        }

        .principles-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        .principle-card {
            text-align: center;
            padding: 2.5rem 2rem;
            background: rgba(30, 41, 59, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.03);
            border-radius: 20px;
            transition: all 0.4s ease;
        }

        .principle-card:hover {
            background: rgba(30, 41, 59, 0.5);
            transform: translateY(-8px);
        }

        .principle-icon {
            width: 64px;
            height: 64px;
            background: var(--gradient-primary);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
            font-size: 1.75rem;
        }

        .principle-number {
            font-size: 0.85rem;
            color: var(--primary);
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .principle-title {
            font-size: 1.25rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }

        .principle-desc {
            color: var(--gray-600);
            font-size: 0.95rem;
            line-height: 1.7;
        }

        /* CTA Section */
        .cta {
            padding: 8rem 2rem;
            background: var(--gradient-primary);
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .cta::before {
            content: '';
            position: absolute;
            inset: 0;
            background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        }

        .cta-content {
            position: relative;
            z-index: 1;
            max-width: 700px;
            margin: 0 auto;
        }

        .cta h2 {
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 800;
            margin-bottom: 1rem;
        }

        .cta p {
            font-size: 1.1rem;
            opacity: 0.9;
            margin-bottom: 2rem;
        }

        .cta .btn {
            background: white;
            color: var(--primary);
        }

        .cta .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
        }

        /* Footer */
        footer {
            padding: 4rem 2rem 2rem;
            background: var(--darker);
            border-top: 1px solid rgba(255, 255, 255, 0.05);
        }

        .footer-content {
            max-width: 1200px;
            margin: 0 auto;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr;
            gap: 3rem;
            margin-bottom: 3rem;
        }

        .footer-brand p {
            color: var(--gray-600);
            font-size: 0.95rem;
            line-height: 1.7;
            margin-top: 1rem;
            max-width: 300px;
        }

        .footer-title {
            font-size: 0.9rem;
            font-weight: 700;
            color: var(--gray-300);
            margin-bottom: 1.25rem;
        }

        .footer-links {
            list-style: none;
        }

        .footer-links li {
            margin-bottom: 0.75rem;
        }

        .footer-links a {
            color: var(--gray-600);
            text-decoration: none;
            font-size: 0.9rem;
            transition: color 0.3s ease;
        }

        .footer-links a:hover {
            color: white;
        }

        .footer-legal {
            display: flex;
            gap: 1.5rem;
        }

        .footer-legal a {
            color: var(--gray-600);
            text-decoration: none;
            font-size: 0.85rem;
            transition: color 0.3s ease;
        }

        .footer-legal a:hover {
            color: white;
        }

        .footer-bottom {
            padding-top: 2rem;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .footer-copyright {
            color: var(--gray-600);
            font-size: 0.85rem;
        }

        .footer-social {
            display: flex;
            gap: 1rem;
        }

        .footer-social a {
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--gray-600);
            transition: all 0.3s ease;
        }

        .footer-social a:hover {
            background: var(--primary);
            color: white;
        }

        /* Mobile Menu */
        .mobile-menu-btn {
            display: none;
            flex-direction: column;
            gap: 5px;
            cursor: pointer;
            padding: 5px;
            background: none;
            border: none;
        }

        .mobile-menu-btn span {
            width: 24px;
            height: 2px;
            background: white;
            transition: all 0.3s ease;
        }
        
        /* Mobile Menu Dropdown - hidden by default on desktop */
        .mobile-menu {
            display: none;
        }

        /* Responsive */
        @media (max-width: 1024px) {
            .about-grid {
                grid-template-columns: 1fr;
                gap: 3rem;
            }

            .about-content {
                padding-right: 0;
            }

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

        @media (max-width: 768px) {
            .nav-links {
                display: none;
            }

            .mobile-menu-btn {
                display: flex;
            }
            
            .nav-container {
                position: relative;
            }
            
            .mobile-menu {
                display: none;
                position: fixed;
                top: 70px;
                left: 0;
                right: 0;
                background: rgba(15, 23, 42, 0.98);
                backdrop-filter: blur(20px);
                padding: 1rem;
                flex-direction: column;
                gap: 0;
                border-top: 1px solid rgba(99, 102, 241, 0.2);
                z-index: 999;
            }
            
            .mobile-menu.active {
                display: flex;
            }
            
            .mobile-menu a {
                display: block;
                padding: 1rem;
                color: var(--gray-300);
                text-decoration: none;
                font-size: 1rem;
                transition: all 0.3s ease;
                border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            }
            
            .mobile-menu a:hover {
                background: rgba(99, 102, 241, 0.1);
                color: white;
            }
            
            .mobile-menu a.mobile-cta {
                display: block;
                margin: 1rem;
                padding: 0.875rem;
                background: var(--gradient-primary);
                border-radius: 8px;
                text-align: center;
                color: white;
                font-weight: 600;
            }
            
            .mobile-menu a.mobile-cta:hover {
                opacity: 0.9;
                background: var(--gradient-primary);
            }
            
            .mobile-menu-btn.active span:nth-child(1) {
                transform: rotate(45deg) translate(5px, 5px);
            }
            
            .mobile-menu-btn.active span:nth-child(2) {
                opacity: 0;
            }
            
            .mobile-menu-btn.active span:nth-child(3) {
                transform: rotate(-45deg) translate(5px, -5px);
            }

            .hero {
                min-height: auto;
                padding: 6rem 1rem 3rem;
            }
            
            .hero h1 {
                font-size: 2rem;
                line-height: 1.2;
            }
            
            .hero p {
                font-size: 0.95rem;
                padding: 0 0.5rem;
            }
            
            .hero-buttons {
                flex-direction: column;
                padding: 0 1rem;
            }
            
            .hero-buttons .btn {
                width: 100%;
                justify-content: center;
            }
            
            .hero-stats {
                flex-direction: column;
                gap: 1.5rem;
                margin-top: 3rem;
            }
            
            .stat-item {
                padding: 1.5rem;
            }
            
            .stat-number {
                font-size: 2rem;
            }
            
            .stat-label {
                font-size: 0.85rem;
            }

            .games-grid {
                grid-template-columns: 1fr;
                gap: 2rem;
            }
            
            .game-carousel {
                height: 280px;
            }
            
            .game-card {
                width: 100%;
            }
            
            .carousel-prev,
            .carousel-next {
                width: 36px;
                height: 36px;
                font-size: 1rem;
            }
            
            .carousel-dots {
                bottom: 10px;
            }
            
            .game-info {
                padding: 1rem;
            }
            
            .game-info h3 {
                font-size: 1.25rem;
            }
            
            .game-info p {
                font-size: 0.85rem;
            }

            .section {
                padding: 4rem 1rem;
            }
            
            .section-title {
                font-size: 1.75rem;
                margin-bottom: 1.5rem;
            }
            
            .section-desc {
                font-size: 0.9rem;
                padding: 0 0.5rem;
            }

            .about-grid {
                grid-template-columns: 1fr;
                gap: 2rem;
            }
            
            .about-image {
                order: -1;
            }
            
            .about-image img {
                max-height: 250px;
            }

            .values-grid {
                grid-template-columns: 1fr;
                gap: 1rem;
            }
            
            .value-card {
                padding: 1.25rem;
            }
            
            .value-card h3 {
                font-size: 1.1rem;
            }
            
            .value-card p {
                font-size: 0.85rem;
            }
            
            .red-line {
                font-size: 0.8rem;
                padding: 0.5rem;
            }

            .principles-grid {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }
            
            .principle-card {
                padding: 1.5rem;
            }
            
            .principle-number {
                font-size: 2rem;
            }
            
            .principle-card h3 {
                font-size: 1.1rem;
            }
            
            .principle-card p {
                font-size: 0.85rem;
            }

            .about-values {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }
            
            .about-value-item {
                padding: 1.5rem;
            }
            
            .about-value-item h4 {
                font-size: 1.1rem;
            }
            
            .about-value-item p {
                font-size: 0.85rem;
            }

            .summary-banner {
                padding: 1.5rem 1rem;
                margin-top: 2rem;
            }
            
            .summary-banner p {
                font-size: 0.9rem;
            }

            .cta-section {
                padding: 4rem 1rem;
            }
            
            .cta-section h2 {
                font-size: 1.5rem;
            }
            
            .cta-section p {
                font-size: 0.9rem;
            }
            
            .cta-buttons {
                flex-direction: column;
                gap: 1rem;
            }
            
            .cta-buttons .btn {
                width: 100%;
                justify-content: center;
            }

            .footer-grid {
                grid-template-columns: 1fr;
                gap: 2rem;
                padding: 0 1rem;
            }
            
            .footer-section h4 {
                font-size: 1rem;
            }
            
            .footer-section ul li a {
                font-size: 0.85rem;
            }
            
            .footer-bottom {
                flex-direction: column;
                text-align: center;
                gap: 1rem;
                padding: 1.5rem 1rem;
            }
            
            .footer-bottom p {
                font-size: 0.8rem;
            }
        }
        
        /* 移动端触摸优化 */
        @media (hover: none) and (pointer: coarse) {
            .btn {
                min-height: 48px;
                min-width: 48px;
            }
            
            .carousel-prev,
            .carousel-next,
            .dot {
                min-width: 44px;
                min-height: 44px;
            }
            
            .nav-cta {
                display: none;
            }
        }
        
        /* 小屏手机适配 */
        @media (max-width: 375px) {
            .hero h1 {
                font-size: 1.75rem;
            }
            
            .hero p {
                font-size: 0.85rem;
            }
            
            .game-carousel {
                height: 250px;
            }
            
            .section-title {
                font-size: 1.5rem;
            }
        }
        
        /* 横屏模式适配 */
        @media (max-height: 500px) and (orientation: landscape) {
            .hero {
                min-height: auto;
                padding-top: 5rem;
            }
            
            .hero h1 {
                font-size: 1.75rem;
            }
            
            .hero-stats {
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: center;
            }
        }

        /* Animations on scroll */
        .animate-on-scroll {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease;
        }

        .animate-on-scroll.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Summary Banner */
        .summary-banner {
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%);
            border: 1px solid rgba(99, 102, 241, 0.2);
            border-radius: 16px;
            padding: 2rem;
            margin-top: 3rem;
            text-align: center;
        }

        .summary-banner p {
            font-size: 1rem;
            color: var(--gray-300);
            font-style: italic;
        }
    </style>
</head>
<body>
    <!-- Navigation -->
    <nav id="navbar">
        <div class="nav-container">
            <a href="#" class="logo">
                <img src="images/logo.png" alt="Arkreson Tech" class="logo-icon" style="height:36px;">
                <span class="logo-text" data-i18n="brand.name">Arkreson Tech</span>
            </a>
            <ul class="nav-links">
                <li><a href="#games" data-i18n="nav.products">Products</a></li>
                <li><a href="#about" data-i18n="nav.about">About Us</a></li>
                <li><a href="#values" data-i18n="nav.values">Core Values</a></li>
                <li><a href="#principles" data-i18n="nav.principles">Principles</a></li>
                <li><a href="#contact" data-i18n="nav.join">Join Us</a></li>
            </ul>
            <div class="lang-switcher">
                <button class="lang-btn active" data-lang="en">EN</button>
                <span style="color: var(--gray-600);">|</span>
                <button class="lang-btn" data-lang="es">ES</button>
            </div>
            <a href="#contact" class="nav-cta" data-i18n="nav.contact">Contact Us</a>
            <button class="mobile-menu-btn" aria-label="菜单">
                <span></span>
                <span></span>
                <span></span>
            </button>
        </div>
        <!-- Mobile Menu -->
        <div class="mobile-menu">
            <a href="#games" data-i18n="nav.products">Products</a>
            <a href="#about" data-i18n="nav.about">About Us</a>
            <a href="#values" data-i18n="nav.values">Core Values</a>
            <a href="#principles" data-i18n="nav.principles">Principles</a>
            <a href="#contact" data-i18n="nav.join">Join Us</a>
            <a href="#contact" class="mobile-cta" data-i18n="nav.contact">Contact Us</a>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="hero">
        <div class="hero-bg"></div>
        <div class="hero-glow hero-glow-1"></div>
        <div class="hero-glow hero-glow-2"></div>
        <div class="hero-particles">
            <div class="particle" style="left: 5%;"></div>
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
        </div>
        <div class="hero-content">
            <div class="hero-badge">
                <span class="hero-badge-dot"></span>
                <span data-i18n="hero.badge">2 Games · 1M+ Downloads · 4.8★ Average</span>
            </div>
            <h1 data-i18n="hero.title">Crafting the World's Most Trusted<br>Casual Puzzle Games</h1>
            <p data-i18n="hero.subtitle">Built by ex-Tencent and King product leads who believe great games don't need gimmicks — just honest design, endless polish, and respect for your time.</p>
            <div class="hero-buttons">
                <a href="#games" class="btn btn-primary">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <polygon points="5 3 19 12 5 21 5 3"></polygon>
                    </svg>
                    <span data-i18n="hero.btn.explore">Explore Our Games</span>
                </a>
                <a href="#about" class="btn btn-secondary" data-i18n="hero.btn.learn">Learn More</a>
            </div>
            <div class="hero-stats">
                <div class="stat-item">
                    <div class="stat-number">TOP</div>
                    <div class="stat-label" data-i18n="hero.stat1">Top Tier Casual Puzzle Target</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">AI</div>
                    <div class="stat-label" data-i18n="hero.stat2">AI-Native Workflow</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">∞</div>
                    <div class="stat-label" data-i18n="hero.stat3">Iterate & Reflect</div>
                </div>
            </div>
        </div>
    </section>

    <!-- Games Section -->
    <section class="games" id="games">
        <div class="section-header">
            <span class="section-label" data-i18n="games.label">Our Games</span>
            <h2 class="section-title" data-i18n="games.title">Crafted with Care</h2>
            <p class="section-desc" data-i18n="games.desc">Every game is meticulously polished to deliver the ultimate gaming experience</p>
        </div>
        <div class="games-grid">
            <!-- Solitaire Card Game -->
            <div class="game-card">
                <div class="game-carousel" id="solitaire-carousel">
                    <div class="carousel-inner">
                        <picture>
  <source srcset="images/thumb/1-480.webp 480w, images/thumb/1-800.webp 800w" type="image/webp">
  <img src="images/thumb/1-800.jpg" srcset="images/thumb/1-480.jpg 480w, images/thumb/1-800.jpg 800w" sizes="(max-width: 768px) 100vw, 50vw" alt="Solitaire Klondike Card Game" class="game-image" loading="lazy" decoding="async">
</picture>
                        <picture>
  <source srcset="images/thumb/2-480.webp 480w, images/thumb/2-800.webp 800w" type="image/webp">
  <img src="images/thumb/2-800.jpg" srcset="images/thumb/2-480.jpg 480w, images/thumb/2-800.jpg 800w" sizes="(max-width: 768px) 100vw, 50vw" alt="Solitaire Klondike Card Game" class="game-image" loading="lazy" decoding="async">
</picture>
                        <picture>
  <source srcset="images/thumb/3-480.webp 480w, images/thumb/3-800.webp 800w" type="image/webp">
  <img src="images/thumb/3-800.jpg" srcset="images/thumb/3-480.jpg 480w, images/thumb/3-800.jpg 800w" sizes="(max-width: 768px) 100vw, 50vw" alt="Solitaire Klondike Card Game" class="game-image" loading="lazy" decoding="async">
</picture>
                        <picture>
  <source srcset="images/thumb/4-480.webp 480w, images/thumb/4-800.webp 800w" type="image/webp">
  <img src="images/thumb/4-800.jpg" srcset="images/thumb/4-480.jpg 480w, images/thumb/4-800.jpg 800w" sizes="(max-width: 768px) 100vw, 50vw" alt="Solitaire Klondike Card Game" class="game-image" loading="lazy" decoding="async">
</picture>
                        <picture>
  <source srcset="images/thumb/5-480.webp 480w, images/thumb/5-800.webp 800w" type="image/webp">
  <img src="images/thumb/5-800.jpg" srcset="images/thumb/5-480.jpg 480w, images/thumb/5-800.jpg 800w" sizes="(max-width: 768px) 100vw, 50vw" alt="Solitaire Klondike Card Game" class="game-image" loading="lazy" decoding="async">
</picture>
                    </div>
                    <div class="carousel-dots">
                        <span class="dot active" data-index="0"></span>
                        <span class="dot" data-index="1"></span>
                        <span class="dot" data-index="2"></span>
                        <span class="dot" data-index="3"></span>
                        <span class="dot" data-index="4"></span>
                    </div>
                    <button class="carousel-btn prev" onclick="moveCarousel('solitaire-carousel', -1)">‹</button>
                    <button class="carousel-btn next" onclick="moveCarousel('solitaire-carousel', 1)">›</button>
                </div>
                <div class="game-content">
                    <div class="game-tags">
                        <span class="game-tag" data-i18n="game1.tag1">Classic Card</span>
                        <span class="game-tag" data-i18n="game1.tag2">Offline Play</span>
                    </div>
                    <h3 class="game-title">Solitaire Card Game</h3>
                    <p class="game-desc" data-i18n="game1.desc">Relax with this elegantly designed classic Klondike solitaire game. Free download with offline play available anywhere.</p>
                    <div class="game-features">
                        <span class="game-feature">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>
                            <span data-i18n="game1.feat1">Free Download</span>
                        </span>
                        <span class="game-feature">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>
                            <span data-i18n="game1.feat2">Offline Play</span>
                        </span>
                        <span class="game-feature">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>
                            <span data-i18n="game1.feat3">Beautiful Graphics</span>
                        </span>
                    </div>
                </div>
            </div>

            <!-- Blossom Go -->
            <div class="game-card">
                <div class="game-carousel" id="blossom-carousel">
                    <div class="carousel-inner">
                        <picture>
  <source srcset="images/thumb/21-480.webp 480w, images/thumb/21-800.webp 800w" type="image/webp">
  <img src="images/thumb/21-800.jpg" srcset="images/thumb/21-480.jpg 480w, images/thumb/21-800.jpg 800w" sizes="(max-width: 768px) 100vw, 50vw" alt="Blossom Go" class="game-image" loading="lazy" decoding="async">
</picture>
                        <picture>
  <source srcset="images/thumb/22-480.webp 480w, images/thumb/22-800.webp 800w" type="image/webp">
  <img src="images/thumb/22-800.jpg" srcset="images/thumb/22-480.jpg 480w, images/thumb/22-800.jpg 800w" sizes="(max-width: 768px) 100vw, 50vw" alt="Blossom Go" class="game-image" loading="lazy" decoding="async">
</picture>
                        <picture>
  <source srcset="images/thumb/23-480.webp 480w, images/thumb/23-800.webp 800w" type="image/webp">
  <img src="images/thumb/23-800.jpg" srcset="images/thumb/23-480.jpg 480w, images/thumb/23-800.jpg 800w" sizes="(max-width: 768px) 100vw, 50vw" alt="Blossom Go" class="game-image" loading="lazy" decoding="async">
</picture>
                        <picture>
  <source srcset="images/thumb/24-480.webp 480w, images/thumb/24-800.webp 800w" type="image/webp">
  <img src="images/thumb/24-800.jpg" srcset="images/thumb/24-480.jpg 480w, images/thumb/24-800.jpg 800w" sizes="(max-width: 768px) 100vw, 50vw" alt="Blossom Go" class="game-image" loading="lazy" decoding="async">
</picture>
                        <picture>
  <source srcset="images/thumb/25-480.webp 480w, images/thumb/25-800.webp 800w" type="image/webp">
  <img src="images/thumb/25-800.jpg" srcset="images/thumb/25-480.jpg 480w, images/thumb/25-800.jpg 800w" sizes="(max-width: 768px) 100vw, 50vw" alt="Blossom Go" class="game-image" loading="lazy" decoding="async">
</picture>
                        <picture>
  <source srcset="images/thumb/26-480.webp 480w, images/thumb/26-800.webp 800w" type="image/webp">
  <img src="images/thumb/26-800.jpg" srcset="images/thumb/26-480.jpg 480w, images/thumb/26-800.jpg 800w" sizes="(max-width: 768px) 100vw, 50vw" alt="Blossom Go" class="game-image" loading="lazy" decoding="async">
</picture>
                        <picture>
  <source srcset="images/thumb/27-480.webp 480w, images/thumb/27-800.webp 800w" type="image/webp">
  <img src="images/thumb/27-800.jpg" srcset="images/thumb/27-480.jpg 480w, images/thumb/27-800.jpg 800w" sizes="(max-width: 768px) 100vw, 50vw" alt="Blossom Go" class="game-image" loading="lazy" decoding="async">
</picture>
                    </div>
                    <div class="carousel-dots">
                        <span class="dot active" data-index="0"></span>
                        <span class="dot" data-index="1"></span>
                        <span class="dot" data-index="2"></span>
                        <span class="dot" data-index="3"></span>
                        <span class="dot" data-index="4"></span>
                        <span class="dot" data-index="5"></span>
                        <span class="dot" data-index="6"></span>
                    </div>
                    <button class="carousel-btn prev" onclick="moveCarousel('blossom-carousel', -1)">‹</button>
                    <button class="carousel-btn next" onclick="moveCarousel('blossom-carousel', 1)">›</button>
                </div>
                <div class="game-content">
                    <div class="game-tags">
                        <span class="game-tag" data-i18n="game2.tag1">Flower Puzzle</span>
                        <span class="game-tag" data-i18n="game2.tag2">Match-3 Gameplay</span>
                    </div>
                    <h3 class="game-title">Blossom Go</h3>
                    <p class="game-desc" data-i18n="game2.desc">A creative and relaxing click-to-pop puzzle game. Every flower awaits to bloom at your fingertips. Are you ready to clear all bubbles?</p>
                    <div class="game-features">
                        <span class="game-feature">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>
                            <span data-i18n="game2.feat1">Gravity Cascade</span>
                        </span>
                        <span class="game-feature">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>
                            <span data-i18n="game2.feat2">Hundreds of Levels</span>
                        </span>
                        <span class="game-feature">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>
                            <span data-i18n="game2.feat3">Beautiful Floral Art</span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- About Section -->
    <section class="about" id="about">
        <div class="about-grid">
            <div class="about-visual">
                <div class="about-image-container">
                    <div class="about-main-image" style="background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%); display: flex; align-items: center; justify-content: center; font-size: 6rem;">
                        🎯
                    </div>
                    <div class="about-accent"></div>
                </div>
                <div class="about-stats-card">
                    <div class="about-stat">
                        <span class="about-stat-number">100%</span>
                        <span class="about-stat-label" data-i18n="about.stat1">Sincere Focus</span>
                    </div>
                    <div class="about-stat">
                        <span class="about-stat-number">TOP 1</span>
                        <span class="about-stat-label" data-i18n="about.stat2">Tier Goal</span>
                    </div>
                </div>
            </div>
            <div class="about-content">
                <span class="section-label" data-i18n="about.label">About Us</span>
                <h2 class="section-title" data-i18n="about.title">About Arkreson</h2>
                <p class="about-text" data-i18n="about.text1">
                    Arkreson is a startup founded by experienced entrepreneurs and a seasoned product team, dedicated to creating trusted, exceptional casual puzzle experiences for players around the world.
                </p>
                <p class="about-text" data-i18n="about.text2">
                    We believe sincerity and focus are the foundation of great products. Every design and engineering decision begins with the player and is guided by long-term trust, clarity, and care.
                </p>
                <div class="about-values">
                    <div class="about-value">
                        <div class="about-value-icon">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
                        </div>
                        <span class="about-value-text" data-i18n="about.val1">Experience Excellence — Less, but Better</span>
                    </div>
                    <div class="about-value">
                        <div class="about-value-icon">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
                        </div>
                        <span class="about-value-text" data-i18n="about.val2">Trustworthiness — Clear & Reliable</span>
                    </div>
                    <div class="about-value">
                        <div class="about-value-icon">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
                        </div>
                        <span class="about-value-text" data-i18n="about.val3">Sincere Communication — Facts First</span>
                    </div>
                    <div class="about-value">
                        <div class="about-value-icon">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
                        </div>
                        <span class="about-value-text" data-i18n="about.val4">Fast Learning & Validation — Experiment, Learn, Improve</span>
                    </div>
                    <div class="about-value">
                        <div class="about-value-icon">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
                        </div>
                        <span class="about-value-text" data-i18n="about.val5">Sincerity & Focus</span>
                    </div>
                    <div class="about-value">
                        <div class="about-value-icon">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8h1a4 4 0 0 1 0 8h-1"></path><path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"></path><line x1="6" y1="1" x2="6" y2="4"></line><line x1="10" y1="1" x2="10" y2="4"></line><line x1="14" y1="1" x2="14" y2="4"></line></svg>
                        </div>
                        <span class="about-value-text" data-i18n="about.val6">Top-Tier Ambition</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Values Section -->
    <section class="values" id="values">
        <div class="section-header">
            <span class="section-label" data-i18n="values.label">CORE VALUES</span>
            <h2 class="section-title" data-i18n="values.title">What We Believe In</h2>
            <p class="section-desc" data-i18n="values.desc">Five values that shape how we build, work, and grow.</p>
        </div>
        <div class="values-grid">
            <div class="value-card">
                <div class="value-number">01</div>
                <h3 class="value-title" data-i18n="values.v1.title">Experience Excellence</h3>
                <p class="value-subtitle" data-i18n="values.v1.subtitle">Less, but Better</p>
                <p class="value-desc" data-i18n="values.v1.desc">We would rather build fewer features and perfect the critical path. Every detail deserves thoughtful attention.</p>
            </div>
            <div class="value-card">
                <div class="value-number">02</div>
                <h3 class="value-title" data-i18n="values.v2.title">Trustworthiness</h3>
                <p class="value-subtitle" data-i18n="values.v2.subtitle">Trust in Team, Trust in Product</p>
                <p class="value-desc" data-i18n="values.v2.desc">We build trust with users, teammates, and partners through clarity, defined boundaries, and promises kept.</p>
            </div>
            <div class="value-card">
                <div class="value-number">03</div>
                <h3 class="value-title" data-i18n="values.v3.title">Sincere Communication</h3>
                <p class="value-subtitle" data-i18n="values.v3.subtitle">Facts First, Speak Clearly</p>
                <p class="value-desc" data-i18n="values.v3.desc">We communicate with honesty and clarity. We face problems directly and respectfully.</p>
            </div>
            <div class="value-card">
                <div class="value-number">04</div>
                <h3 class="value-title" data-i18n="values.v4.title">Proactive Ownership</h3>
                <p class="value-subtitle" data-i18n="values.v4.subtitle">Self-Driven, See It Through</p>
                <p class="value-desc" data-i18n="values.v4.desc">We identify problems early, drive collaboration, and take responsibility for results from start to finish.</p>
            </div>
            <div class="value-card">
                <div class="value-number">05</div>
                <h3 class="value-title" data-i18n="values.v5.title">Fast Learning & Validation</h3>
                <p class="value-subtitle" data-i18n="values.v5.subtitle">Experiment, Reflect, Improve</p>
                <p class="value-desc" data-i18n="values.v5.desc">We learn through small experiments, accept that not every try will succeed, and turn each result into reusable insight.</p>
            </div>
        </div>
    </section>

    <!-- Principles Section -->
    <section class="principles" id="principles">
        <div class="section-header">
            <span class="section-label" data-i18n="principles.label">PROGRESS PRINCIPLES</span>
            <h2 class="section-title" data-i18n="principles.title">How We Keep Growing Stronger</h2>
            <p class="section-desc" data-i18n="principles.desc">Four principles that guide how we learn, improve, and grow.</p>
        </div>
        <div class="principles-grid">
            <div class="principle-card">
                <div class="principle-icon">🎯</div>
                <div class="principle-number" data-i18n="principles.p1.num">Principle 1</div>
                <h3 class="principle-title" data-i18n="principles.p1.title">Focus on the Right Niche</h3>
                <p class="principle-desc" data-i18n="principles.p1.desc">Choose the right battlefield, then go deep. We stay focused and avoid hype-driven or opportunistic expansion.</p>
            </div>
            <div class="principle-card">
                <div class="principle-icon">🤖</div>
                <div class="principle-number" data-i18n="principles.p2.num">Principle 2</div>
                <h3 class="principle-title" data-i18n="principles.p2.title">AI-Native Organization</h3>
                <p class="principle-desc" data-i18n="principles.p2.desc">We use systems to amplify people. Information, collaboration, and decisions are organized through clear goals, principles, and feedback loops.</p>
            </div>
            <div class="principle-card">
                <div class="principle-icon">💡</div>
                <div class="principle-number" data-i18n="principles.p3.num">Principle 3</div>
                <h3 class="principle-title" data-i18n="principles.p3.title">Open Ideas, Clear Ownership</h3>
                <p class="principle-desc" data-i18n="principles.p3.desc">Ideas can come from anyone, but every task must have clear ownership and someone accountable for seeing it through.</p>
            </div>
            <div class="principle-card">
                <div class="principle-icon">📈</div>
                <div class="principle-number" data-i18n="principles.p4.num">Principle 4</div>
                <h3 class="principle-title" data-i18n="principles.p4.title">Build Organizational Capability Through Reflection</h3>
                <p class="principle-desc" data-i18n="principles.p4.desc">Every experiment, success, and setback should leave behind a better rule, process, or shared understanding.</p>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="cta" id="contact">
        <div class="cta-content">
            <h2 data-i18n="cta.title">Join Us, Build Great Experiences Together</h2>
            <p data-i18n="cta.desc">We're looking for like-minded people to build trusted, exceptional game experiences for players around the world. If our values resonate with you, we'd love to hear from you.</p>
            <a href="mailto:contact@arkreson.com" class="btn">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
                    <polyline points="22,6 12,13 2,6"></polyline>
                </svg>
                <span data-i18n="cta.btn">Get in Touch</span>
            </a>
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <div class="footer-content">
            <div class="footer-grid">
                <div class="footer-brand">
                    <a href="#" class="logo">
                        <div class="logo-icon">🎮</div>
                        <span class="logo-text" data-i18n="brand.name">Arkreson Tech</span>
                    </a>
                    <p data-i18n="brand.tagline">Creating trusted, exceptional game experiences with sincerity and focus.</p>
                </div>
                <div>
                    <h4 class="footer-title" data-i18n="footer.products">Products</h4>
                    <ul class="footer-links">
                        <li><a href="#games">Solitaire Card Game</a></li>
                        <li><a href="#games">Blossom Go</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="footer-title" data-i18n="footer.company">Company</h4>
                    <ul class="footer-links">
                        <li><a href="#about" data-i18n="nav.about">About Us</a></li>
                        <li><a href="#values" data-i18n="nav.values">Core Values</a></li>
                        <li><a href="#principles" data-i18n="nav.principles">Principles</a></li>
                        <li><a href="#contact" data-i18n="nav.join">Join Us</a></li>
                        <li><a href="#contact" data-i18n="nav.contact">Contact Us</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="footer-title" data-i18n="footer.contact">Contact</h4>
                    <ul class="footer-links">
                        <li><a href="mailto:contact@arkreson.com">contact@arkreson.com</a></li>
                    </ul>
                </div>
            </div>
            <div class="footer-bottom">
                <p class="footer-copyright">© 2026 Arkreson Technology. All rights reserved.</p>
                <div class="footer-social">
                    <a href="#" aria-label="Twitter">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
                        </svg>
                    </a>
                    <a href="#" aria-label="LinkedIn">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19a.66.66 0 000 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z"/>
                        </svg>
                    </a>
                    <a href="#" aria-label="GitHub">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/>
                        </svg>
                    </a>
                </div>
            </div>
        </div>
    </footer>

    <script>
        // i18n translations
        const translations = {
            en: {
                'brand.name': 'Arkreson Tech',
                'brand.tagline': 'Creating trusted, exceptional game experiences with sincerity and focus.',
                'nav.products': 'Products',
                'nav.about': 'About Us',
                'nav.values': 'Core Values',
                'nav.principles': 'Principles',
                'nav.join': 'Join Us',
                'nav.contact': 'Contact Us',
                'hero.badge': '2 Games · 1M+ Downloads · 4.8★ Average',
                'hero.title': 'Crafting the World's Most Trusted<br>Casual Puzzle Games',
                'hero.subtitle': 'Built by ex-Tencent and King product leads who believe great games don\'t need gimmicks — just honest design, endless polish, and respect for your time.',
                'hero.btn.explore': 'Explore Our Games',
                'hero.btn.learn': 'Learn More',
                'hero.stat1': 'Top Tier Casual Puzzle Target',
                'hero.stat2': 'AI-Native Workflow',
                'hero.stat3': 'Iterate & Reflect',
                'games.label': 'Our Games',
                'games.title': 'Crafted with Care',
                'games.desc': 'Every game is meticulously polished to deliver the ultimate gaming experience',
                'game1.tag1': 'Classic Card',
                'game1.tag2': 'Offline Play',
                'game1.feat1': 'Free Download',
                'game1.feat2': 'Offline Play',
                'game1.feat3': 'Beautiful Graphics',
                'game2.tag1': 'Flower Puzzle',
                'game2.tag2': 'Match-3 Gameplay',
                'game2.feat1': 'Gravity Cascade',
                'game2.feat2': 'Hundreds of Levels',
                'game2.feat3': 'Beautiful Floral Art',
                'about.label': 'About Us',
                'about.title': 'About Arkreson',
                'about.text1': 'Arkreson is a startup founded by experienced entrepreneurs and a seasoned product team, dedicated to creating trusted, exceptional casual puzzle experiences for players around the world.',
                'about.text2': 'We believe sincerity and focus are the foundation of great products. Every design and engineering decision begins with the player and is guided by long-term trust, clarity, and care.',
                'about.stat1': 'Sincere Focus',
                'about.stat2': 'Top-Tier Goal',
                'about.val1': 'Experience Excellence — Less, but Better',
                'about.val2': 'Trustworthiness — Clear & Reliable',
                'about.val3': 'Sincere Communication — Facts First',
                'about.val4': 'Fast Learning & Validation — Experiment, Learn, Improve',
                'about.val5': 'Sincerity & Focus',
                'about.val6': 'Top-Tier Ambition',
                'values.label': 'CORE VALUES',
                'values.title': 'What We Believe In',
                'values.desc': 'Five values that shape how we build, work, and grow.',
                'values.v1.title': 'Experience Excellence',
                'values.v1.subtitle': 'Less, but Better',
                'values.v1.desc': 'We would rather build fewer features and perfect the critical path. Every detail deserves thoughtful attention.',
                'values.v2.title': 'Trustworthiness',
                'values.v2.subtitle': 'Trust in Team, Trust in Product',
                'values.v2.desc': 'We build trust with users, teammates, and partners through clarity, defined boundaries, and promises kept.',
                'values.v3.title': 'Sincere Communication',
                'values.v3.subtitle': 'Facts First, Speak Clearly',
                'values.v3.desc': 'We communicate with honesty and clarity. We face problems directly and respectfully.',
                'values.v4.title': 'Proactive Ownership',
                'values.v4.subtitle': 'Self-Driven, See It Through',
                'values.v4.desc': 'We identify problems early, drive collaboration, and take responsibility for results from start to finish.',
                'values.v5.title': 'Fast Learning & Validation',
                'values.v5.subtitle': 'Experiment, Reflect, Improve',
                'values.v5.desc': 'We learn through small experiments, accept that not every try will succeed, and turn each result into reusable insight.',
                'principles.label': 'PROGRESS PRINCIPLES',
                'principles.title': 'How We Keep Growing Stronger',
                'principles.desc': 'Four principles that guide how we learn, improve, and grow.',
                'principles.p1.num': 'Principle 1',
                'principles.p1.title': 'Focus on the Right Niche',
                'principles.p1.desc': 'Choose the right battlefield, then go deep. We stay focused and avoid hype-driven or opportunistic expansion.',
                'principles.p2.num': 'Principle 2',
                'principles.p2.title': 'AI-Native Organization',
                'principles.p2.desc': 'We use systems to amplify people. Information, collaboration, and decisions are organized through clear goals, principles, and feedback loops.',
                'principles.p3.num': 'Principle 3',
                'principles.p3.title': 'Open Ideas, Clear Ownership',
                'principles.p3.desc': 'Ideas can come from anyone, but every task must have clear ownership and someone accountable for seeing it through.',
                'principles.p4.num': 'Principle 4',
                'principles.p4.title': 'Build Organizational Capability Through Reflection',
                'principles.p4.desc': 'Every experiment, success, and setback should leave behind a better rule, process, or shared understanding.',
                'cta.title': 'Join Us, Build Great Experiences Together',
                'cta.desc': "We're looking for like-minded people to build trusted, exceptional game experiences for players around the world. If our values resonate with you, we'd love to hear from you.",
                'cta.btn': 'Get in Touch',
                'footer.products': 'Products',
                'footer.company': 'Company',
                'footer.contact': 'Contact'
            },
            es: {
                'brand.name': 'Arkreson',
                'brand.tagline': 'Creando experiencias de juego confiables y excepcionales con sinceridad y enfoque.',
                'nav.products': 'Productos',
                'nav.about': 'Sobre Nosotros',
                'nav.values': 'Valores Fundamentales',
                'nav.principles': 'Principios',
                'nav.join': 'Únete',
                'nav.contact': 'Contáctanos',
                'hero.badge': '2 Juegos · 1M+ Descargas · 4.8★ Promedio',
                'hero.title': 'Creando los Juegos de Rompecabezas<br>Casuales más Confiables del Mundo',
                'hero.subtitle': 'Construido por ex-líderes de producto de Tencent y King que creen que los grandes juegos no necesitan trucos — solo diseño honesto, pulido infinito y respeto por tu tiempo.',
                'hero.btn.explore': 'Explorar Juegos',
                'hero.btn.learn': 'Más Información',
                'hero.stat1': 'Objetivo Top en Rompecabezas Casuales',
                'hero.stat2': 'Enfoque AI-Native',
                'hero.stat3': 'Iteración y Reflexión Continua',
                'games.label': 'Nuestros Juegos',
                'games.title': 'Juegos Elaborados con Cuidado',
                'games.desc': 'Cada juego está cuidadosamente pulido para brindar la experiencia de juego definitiva',
                'game1.tag1': 'Cartas Clásicas',
                'game1.tag2': 'Juego Sin Conexión',
                'game1.feat1': 'Descarga Gratuita',
                'game1.feat2': 'Sin Conexión',
                'game1.feat3': 'Gráficos Hermosos',
                'game2.tag1': 'Rompecabezas Floral',
                'game2.tag2': 'Gameplay Match-3',
                'game2.feat1': 'Cascada por Gravedad',
                'game2.feat2': ' cientos de Niveles',
                'game2.feat3': 'Hermoso Arte Floral',
                'about.label': 'Sobre Nosotros',
                'about.title': 'Sobre Arkreson',
                'about.text1': 'Arkreson es una startup fundada por emprendedores experimentados y un equipo de producto experimentado, dedicada a crear experiencias de juegos de rompecabezas casuales confiables y excepcionales para jugadores de todo el mundo.',
                'about.text2': 'Creemos que la sinceridad y el enfoque son la base de grandes productos. Cada decisión de diseño e ingeniería comienza con el jugador y se guía por la confianza a largo plazo, la claridad y el cuidado.',
                'about.stat1': 'Sinceridad y Enfoque',
                'about.stat2': 'Ambición de Top',
                'about.val1': 'Excelencia — Menos, pero Mejor',
                'about.val2': 'Confianza — Claro y Confiable',
                'about.val3': 'Comunicación Sincera — Los Hechos Primero',
                'about.val4': 'Aprendizaje y Validación Rápida — Experimentar, Aprender, Mejorar',
                'about.val5': 'Sinceridad y Enfoque',
                'about.val6': 'Ambición de Top',
                'values.label': 'VALORES FUNDAMENTALES',
                'values.title': 'Lo que Creemos',
                'values.desc': 'Cinco valores que moldean cómo construimos, trabajamos y crecemos.',
                'values.v1.title': 'Excelencia en la Experiencia',
                'values.v1.subtitle': 'Menos, pero Mejor',
                'values.v1.desc': 'Preferimos construir menos características y perfeccionar el camino crítico. Cada detalle merece atención cuidadosa.',
                'values.v2.title': 'Confianza',
                'values.v2.subtitle': 'Confiar en el Equipo, Confiar en el Producto',
                'values.v2.desc': 'Construimos confianza con usuarios, compañeros y socios a través de la claridad, límites definidos y promesas cumplidas.',
                'values.v3.title': 'Comunicación Sincera',
                'values.v3.subtitle': 'Los Hechos Primero, Hablar con Claridad',
                'values.v3.desc': 'Comunicamos con honestidad y claridad. Enfrentamos los problemas de manera directa y respetuosa.',
                'values.v4.title': 'Propiedad Proactiva',
                'values.v4.subtitle': 'Autogestión, Verlo Hasta el Final',
                'values.v4.desc': 'Identificamos problemas temprano, impulsamos la colaboración y asumimos responsabilidad por los resultados de principio a fin.',
                'values.v5.title': 'Aprendizaje y Validación Rápida',
                'values.v5.subtitle': 'Experimentar, Reflexionar, Mejorar',
                'values.v5.desc': 'Aprendemos a través de pequeños experimentos, aceptamos que no cada intento tendrá éxito, y convertimos cada resultado en conocimiento reutilizable.',
                'principles.label': 'PRINCIPIOS DE PROGRESO',
                'principles.title': 'Cómo Seguimos Creciendo Más Fuertes',
                'principles.desc': 'Cuatro principios que guían cómo aprendemos, mejoramos y crecemos.',
                'principles.p1.num': 'Principio 1',
                'principles.p1.title': 'Enfocarse en el Nicho Correcto',
                'principles.p1.desc': 'Elige el campo de batalla correcto, luego profundiza. Nos mantenemos enfocados y evitamos la expansión impulsada por la moda o oportunista.',
                'principles.p2.num': 'Principio 2',
                'principles.p2.title': 'Organización AI-Native',
                'principles.p2.desc': 'Usamos sistemas para amplificar a las personas. La información, la colaboración y las decisiones se organizan a través de objetivos claros, principios y bucles de retroalimentación.',
                'principles.p3.num': 'Principio 3',
                'principles.p3.title': 'Ideas Abiertas, Propiedad Clara',
                'principles.p3.desc': 'Las ideas pueden venir de cualquier persona, pero cada tarea debe tener propiedad clara y alguien responsable de llevarla a cabo.',
                'principles.p4.num': 'Principio 4',
                'principles.p4.title': 'Construir Capacidad Organizacional a Través de la Reflexión',
                'principles.p4.desc': 'Cada experimento, éxito y contratiempo debe dejar atrás una mejor regla, proceso o entendimiento compartido.',
                'cta.title': 'Únete, Construyamos Grandes Experiencias Juntos',
                'cta.desc': 'Buscamos personas con ideas afines para crear experiencias de juego confiables y excepcionales para jugadores de todo el mundo. Si nuestros valores resuenan contigo, nos encantaría saber de ti.',
                'cta.btn': 'Ponerse en Contacto',
                'footer.products': 'Productos',
                'footer.company': 'Empresa',
                'footer.contact': 'Contacto'
            }
        };

        let currentLang = 'en';

        function setLanguage(lang) {
            currentLang = lang;
            document.documentElement.lang = lang;
            document.title = lang === 'en'
                ? 'Arkreson Technology - Crafting the World\'s Most Trusted Casual Puzzle Games'
                : 'Arkreson Technology - Creando los Juegos de Rompecabezas Casuales más Confiables del Mundo';

            // Update all elements with data-i18n attribute
            document.querySelectorAll('[data-i18n]').forEach(el => {
                const key = el.getAttribute('data-i18n');
                if (translations[lang][key]) {
                    el.innerHTML = translations[lang][key];
                }
            });

            // Update language button states
            document.querySelectorAll('.lang-btn').forEach(btn => {
                btn.classList.toggle('active', btn.dataset.lang === lang);
            });

            // Save preference
            localStorage.setItem('arkreson-lang', lang);
        }

        // Carousel functionality
        const carouselState = {};
        const carouselIntervals = {};
        
        function updateCarousel(carouselId) {
            const carousel = document.getElementById(carouselId);
            const track = carousel.querySelector('.carousel-inner');
            const dots = carousel.querySelectorAll('.dot');
            const index = carouselState[carouselId] || 0;
            
            track.style.transform = `translateX(-${index * 100}%)`;
            dots.forEach((dot, i) => {
                dot.classList.toggle('active', i === index);
            });
        }
        
        function moveCarousel(carouselId, direction, autoReset = true) {
            const carousel = document.getElementById(carouselId);
            const dots = carousel.querySelectorAll('.dot');
            const total = dots.length;
            
            if (!carouselState[carouselId]) carouselState[carouselId] = 0;
            carouselState[carouselId] = (carouselState[carouselId] + direction + total) % total;
            updateCarousel(carouselId);
            
            if (autoReset) {
                startCarouselAutoPlay(carouselId);
            }
        }
        
        function startCarouselAutoPlay(carouselId) {
            if (carouselIntervals[carouselId]) {
                clearInterval(carouselIntervals[carouselId]);
            }
            carouselIntervals[carouselId] = setInterval(() => {
                moveCarousel(carouselId, 1, false);
            }, 3500);
        }
        
        function initCarousels() {
            document.querySelectorAll('.game-carousel').forEach(carousel => {
                const carouselId = carousel.id;
                const dots = carousel.querySelectorAll('.dot');
                const prevBtn = carousel.querySelector('.carousel-prev');
                const nextBtn = carousel.querySelector('.carousel-next');
                
                dots.forEach((dot, index) => {
                    dot.addEventListener('click', () => {
                        carouselState[carouselId] = index;
                        updateCarousel(carouselId);
                        startCarouselAutoPlay(carouselId);
                    });
                });
                
                if (prevBtn) {
                    prevBtn.addEventListener('click', () => moveCarousel(carouselId, -1));
                }
                if (nextBtn) {
                    nextBtn.addEventListener('click', () => moveCarousel(carouselId, 1));
                }
                
                carousel.addEventListener('mouseenter', () => {
                    if (carouselIntervals[carouselId]) {
                        clearInterval(carouselIntervals[carouselId]);
                    }
                });
                
                carousel.addEventListener('mouseleave', () => {
                    startCarouselAutoPlay(carouselId);
                });
                
                startCarouselAutoPlay(carouselId);
            });
        }
        
        // Initialize language from localStorage or default to English
        document.addEventListener('DOMContentLoaded', () => {
            const savedLang = localStorage.getItem('arkreson-lang') || 'en';
            setLanguage(savedLang);

            // Add click handlers to language buttons
            document.querySelectorAll('.lang-btn').forEach(btn => {
                btn.addEventListener('click', () => {
                    setLanguage(btn.dataset.lang);
                });
            });
            
            // Mobile menu toggle
            const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
            const mobileMenu = document.querySelector('.mobile-menu');
            
            if (mobileMenuBtn && mobileMenu) {
                mobileMenuBtn.addEventListener('click', () => {
                    mobileMenuBtn.classList.toggle('active');
                    mobileMenu.classList.toggle('active');
                });
                
                // Close menu when clicking a link
                mobileMenu.querySelectorAll('a').forEach(link => {
                    link.addEventListener('click', () => {
                        mobileMenuBtn.classList.remove('active');
                        mobileMenu.classList.remove('active');
                    });
                });
                
                // Close menu when clicking outside
                document.addEventListener('click', (e) => {
                    if (!mobileMenuBtn.contains(e.target) && !mobileMenu.contains(e.target)) {
                        mobileMenuBtn.classList.remove('active');
                        mobileMenu.classList.remove('active');
                    }
                });
            }
            
            // Initialize carousels
            initCarousels();
        });

        // Navbar scroll effect
        const navbar = document.getElementById('navbar');
        window.addEventListener('scroll', () => {
            if (window.scrollY > 50) {
                navbar.classList.add('scrolled');
            } else {
                navbar.classList.remove('scrolled');
            }
        });

        // Animate on scroll
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                }
            });
        }, observerOptions);

        document.querySelectorAll('.section-header, .game-card, .value-card, .principle-card').forEach(el => {
            el.classList.add('animate-on-scroll');
            observer.observe(el);
        });

        // Smooth scroll for navigation links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });
    </script>
</body>
</html>