:root {
      --bg: #07080f;
      --bg2: #111425;
      --card-bg: rgba(255,255,255,0.025);
      --card-border: rgba(255,255,255,0.08);
      --primary: #6366f1;
      --primary-glow: rgba(99,102,241,0.3);
      --secondary: #a855f7;
      --accent: #22d3ee;
      --text: #e2e8f0;
      --muted: #94a3b8;
      --white: #ffffff;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }

    body {
      font-family: 'Plus Jakarta Sans', sans-serif;
      background: linear-gradient(135deg, var(--bg) 0%, var(--bg2) 100%);
      color: var(--text);
      min-height: 100vh;
      overflow-x: hidden;
      line-height: 1.7;
    }

    /* ── Glow orbs ── */
    body::before {
      content:'';position:fixed;width:800px;height:800px;
      background:radial-gradient(circle,rgba(99,102,241,.1) 0%,transparent 70%);
      top:-300px;right:-200px;z-index:0;pointer-events:none;filter:blur(80px);
    }
    body::after {
      content:'';position:fixed;width:700px;height:700px;
      background:radial-gradient(circle,rgba(168,85,247,.08) 0%,transparent 70%);
      bottom:-200px;left:-200px;z-index:0;pointer-events:none;filter:blur(80px);
    }

    /* ── Navbar ── */
    header {
      position:fixed;top:0;left:0;width:100%;z-index:200;
      background:rgba(7,8,15,.75);backdrop-filter:blur(14px);
      border-bottom:1px solid var(--card-border);
    }
    .nav {
      max-width:1100px;margin:0 auto;padding:14px 24px;
      display:flex;align-items:center;justify-content:space-between;gap:20px;
    }
    .brand {
      display:flex;align-items:center;gap:10px;text-decoration:none;
    }
    .brand img { width:34px;height:34px;border-radius:8px;border:1px solid var(--card-border); }
    .brand-name { font-size:1.15rem;font-weight:700;color:var(--white); }
    .brand-name span {
      background:linear-gradient(90deg,var(--primary),var(--secondary));
      -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    }
    .nav-links { display:flex;align-items:center;gap:20px; }
    .nav-links a { color:var(--muted);text-decoration:none;font-size:.9rem;font-weight:500;transition:color .25s; }
    .nav-links a:hover { color:var(--white); }

    /* Lang switcher */
    .ls {
      display:inline-flex;background:rgba(255,255,255,.05);
      border:1px solid var(--card-border);border-radius:20px;padding:2px;
    }
    .ls button {
      background:transparent;border:none;color:var(--muted);
      padding:5px 12px;font-size:.8rem;font-weight:600;border-radius:16px;
      cursor:pointer;transition:all .25s;font-family:inherit;
    }
    .ls button.on { background:var(--primary);color:#fff;box-shadow:0 2px 8px rgba(99,102,241,.35); }

    /* ── Hero ── */
    .hero {
      min-height:100vh;display:flex;flex-direction:column;
      align-items:center;justify-content:center;
      text-align:center;padding:120px 24px 80px;position:relative;z-index:1;
    }
    .hero-badge {
      display:inline-flex;align-items:center;gap:8px;
      background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.25);
      color:var(--primary);padding:7px 18px;border-radius:30px;
      font-size:.85rem;font-weight:600;letter-spacing:.5px;margin-bottom:28px;
    }
    .hero-logo-img {
      max-width: 90%;
      width: 700px;
      height: auto;
      margin-bottom: 24px;
      border-radius: 16px;
      box-shadow: 0 10px 40px rgba(34, 211, 238, 0.15), 0 0 80px rgba(168, 85, 247, 0.15);
      animation: float 6s ease-in-out infinite;
    }
    @keyframes float {
      0% { transform: translateY(0px); }
      50% { transform: translateY(-12px); }
      100% { transform: translateY(0px); }
    }
    .hero-sub { font-size:1.1rem;color:var(--muted);max-width:560px;margin:0 auto 40px; }
    .scroll-hint {
      display:flex;flex-direction:column;align-items:center;gap:8px;
      color:var(--muted);font-size:.8rem;margin-top:20px;animation:bounce 2s infinite;
    }
    .scroll-hint svg { width:20px;height:20px;stroke:var(--muted);fill:none;stroke-width:2; }
    @keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(8px)} }

    /* Stats row */
    .stats {
      display:flex;gap:40px;justify-content:center;flex-wrap:wrap;
      margin-top:50px;
    }
    .stat { text-align:center; }
    .stat-num { font-size:2rem;font-weight:800;color:var(--white); }
    .stat-num span { background:linear-gradient(90deg,var(--primary),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent; }
    .stat-label { font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:1px; }

    /* ── Section wrapper ── */
    .section { max-width:1100px;margin:0 auto;padding:80px 24px;position:relative;z-index:1; }

    .sec-header { margin-bottom:40px; }
    .sec-tag {
      display:inline-block;background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.2);
      color:var(--primary);padding:4px 14px;border-radius:20px;font-size:.8rem;
      font-weight:600;letter-spacing:.5px;margin-bottom:12px;
    }
    .sec-title { font-size:2rem;font-weight:700;color:var(--white);letter-spacing:-.5px; }
    
    .games-title {
      font-size: 2.2rem;
      font-weight: 800;
      letter-spacing: 2px;
      text-transform: uppercase;
      background: linear-gradient(135deg, var(--white) 30%, var(--secondary) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      display: inline-block;
      position: relative;
    }
    .games-title::after {
      content: '';
      position: absolute;
      bottom: -12px;
      left: 50%;
      transform: translateX(-50%);
      width: 50px;
      height: 4px;
      background: linear-gradient(90deg, var(--primary), var(--secondary));
      border-radius: 4px;
      box-shadow: 0 0 15px var(--primary-glow);
    }
    .sec-desc { color:var(--muted);margin-top:8px;max-width:520px; }

    /* ── Games grid ── */
    .games-grid { display:flex;flex-wrap:wrap;justify-content:center;gap:30px; }

    .game-card {
      width:260px; max-width:100%;
      background:var(--card-bg);border:1px solid var(--card-border);
      border-radius:20px;overflow:hidden;
      transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
      animation:fadeUp .7s ease both;
    }
    .game-card:hover {
      transform:translateY(-6px);
      box-shadow:0 24px 48px rgba(99,102,241,.12);
      border-color:rgba(99,102,241,.25);
    }
    .card-img-link {
      display: block;
      width: 100%;
      overflow: hidden;
      aspect-ratio: 1/1;
    }
    .card-img-link img {
      width: 100%;
      display: block;
      aspect-ratio: 1/1;
      object-fit: cover;
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .card-img-link:hover img {
      transform: scale(1.08);
    }
    .game-card img:not(.card-img-link img) { width:100%;display:block;aspect-ratio:1/1;object-fit:cover; }
    .game-icon {
      border-radius: 20%;
      padding: 16px;
      background: rgba(0, 0, 0, 0.15);
    }

    .card-body { padding:24px; }
    .card-meta { display:flex;align-items:center;justify-content:space-between;margin-bottom:10px; }
    .card-genre {
      font-size:.6875rem;font-weight:700;color:var(--secondary);
      text-transform:uppercase;letter-spacing:1px;
    }
    .card-status {
      font-size:.72rem;font-weight:600;padding:3px 10px;border-radius:20px;
    }
    .status-live { background:rgba(34,197,94,.12);color:#4ade80;border:1px solid rgba(34,197,94,.2); }
    .status-soon { background:rgba(251,191,36,.1);color:#fbbf24;border:1px solid rgba(251,191,36,.2); }

    .card-body h3 { font-size:1.25rem;font-weight:700;color:var(--white);margin-bottom:8px; }
    .card-body p { color:var(--muted);font-size:.95rem;margin-bottom:20px; }

    .btn {
      display:inline-flex;align-items:center;gap:8px;
      padding:10px 22px;border-radius:30px;font-weight:600;font-size:.9rem;
      text-decoration:none;transition:all .25s;cursor:pointer;border:none;font-family:inherit;
    }
    .btn-primary {
      background:linear-gradient(90deg,var(--primary),var(--secondary));color:#fff;
      box-shadow:0 4px 15px rgba(99,102,241,.35);
    }
    .btn-primary:hover { transform:scale(1.04);box-shadow:0 6px 22px rgba(99,102,241,.5); }
    .btn-ghost {
      background:rgba(255,255,255,.05);color:var(--muted);border:1px solid var(--card-border);
    }
    .btn-ghost:hover { color:var(--white);background:rgba(255,255,255,.08); }
    .btn svg { width:16px;height:16px;fill:currentColor; }

    /* Coming soon placeholder */
    .card-coming {
      aspect-ratio:1/1;background:linear-gradient(135deg,rgba(99,102,241,.06),rgba(168,85,247,.06));
      display:flex;flex-direction:column;align-items:center;justify-content:center;
      gap:10px;color:var(--muted);font-size:2rem;
      border-bottom:1px solid var(--card-border);
    }
    .card-coming span { font-size:.85rem;font-weight:600;letter-spacing:1px;text-transform:uppercase; }

    /* ── About ── */
    .about-grid {
      display:grid;grid-template-columns:1fr 1fr;gap:32px;
    }
    .about-card {
      background:var(--card-bg);border:1px solid var(--card-border);
      border-radius:20px;padding:32px;animation:fadeUp .7s ease both;
    }
    .about-icon {
      width:48px;height:48px;border-radius:12px;
      background:linear-gradient(135deg,rgba(99,102,241,.2),rgba(168,85,247,.2));
      border:1px solid rgba(99,102,241,.2);
      display:flex;align-items:center;justify-content:center;font-size:1.5rem;
      margin-bottom:16px;
    }
    .about-card h3 { font-size:1.1rem;font-weight:700;color:var(--white);margin-bottom:10px; }
    .about-card p { color:var(--muted);font-size:.95rem;line-height:1.7; }

    /* ── Footer ── */
    footer {
      border-top:1px solid var(--card-border);
      background:rgba(7,8,15,.9);padding:40px 24px;
      position:relative;z-index:1;
    }
    .footer-inner {
      max-width:1100px;margin:0 auto;
      display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px;
    }
    .footer-copy { font-size:.82rem;color:var(--muted); }
    .footer-links { display:flex;gap:20px; }
    .footer-links a {
      font-size:.82rem;color:rgba(255,255,255,.3);text-decoration:none;
      transition:color .25s;border-bottom:1px dashed rgba(255,255,255,.12);padding-bottom:1px;
    }
    .footer-links a:hover { color:var(--muted); }

    /* Split columns layout */
    .split-container {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 40px;
      margin-top: 20px;
      width: 100%;
    }
    .split-column {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .sec-header-col {
      margin-bottom: 30px;
      text-align: center;
      width: 100%;
    }
    .games-title-col {
      font-size: 1.6rem;
      font-weight: 800;
      letter-spacing: 2px;
      text-transform: uppercase;
      background: linear-gradient(135deg, var(--white) 30%, var(--secondary) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      display: inline-block;
      position: relative;
    }
    .games-title-col::after {
      content: '';
      position: absolute;
      bottom: -8px;
      left: 50%;
      transform: translateX(-50%);
      width: 40px;
      height: 3px;
      background: linear-gradient(90deg, var(--primary), var(--secondary));
      border-radius: 4px;
      box-shadow: 0 0 10px var(--primary-glow);
    }

    /* Animations */
    @keyframes fadeUp {
      from { opacity:0;transform:translateY(24px); }
      to   { opacity:1;transform:translateY(0); }
    }

    @media(max-width:900px) {
      .split-container {
        grid-template-columns: 1fr;
        gap: 60px;
      }
    }

    @media(max-width:700px) {
      .about-grid { grid-template-columns:1fr; }
      .nav-links a:not(.ls) { display:none; }
      .stats { gap:24px; }
    }

    /* WSIW Presentation Page Styles */
    .wsiw-hero {
      min-height: 80vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 140px 24px 60px;
      position: relative;
      z-index: 1;
    }
    .wsiw-logo {
      width: 120px;
      height: 120px;
      border-radius: 28px;
      border: 2px solid var(--card-border);
      box-shadow: 0 12px 40px rgba(99, 102, 241, 0.25);
      margin-bottom: 24px;
      animation: float 6s ease-in-out infinite;
    }
    .wsiw-title {
      font-size: 3rem;
      font-weight: 800;
      letter-spacing: -1px;
      background: linear-gradient(135deg, var(--white) 40%, var(--secondary) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-bottom: 12px;
    }
    .wsiw-version {
      display: inline-block;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid var(--card-border);
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 0.8rem;
      color: var(--muted);
      margin-bottom: 20px;
    }
    .wsiw-desc-box {
      max-width: 600px;
      background: rgba(255, 255, 255, 0.015);
      border: 1px solid var(--card-border);
      padding: 24px;
      border-radius: 20px;
      backdrop-filter: blur(10px);
      margin-bottom: 30px;
    }
    .wsiw-desc-box p {
      font-size: 1.1rem;
      color: var(--text);
      line-height: 1.6;
    }
    .back-link-btn {
      position: absolute;
      top: 100px;
      left: 40px;
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--muted);
      text-decoration: none;
      font-weight: 600;
      font-size: 0.9rem;
      transition: color 0.25s, transform 0.25s;
    }
    .back-link-btn:hover {
      color: var(--white);
      transform: translateX(-4px);
    }
    .back-link-btn svg {
      width: 18px;
      height: 18px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2.5;
    }
    
    /* Features Grid for WSIW */
    .features-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 24px;
      margin-top: 40px;
      width: 100%;
    }
    .feature-card {
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 20px;
      padding: 28px;
      transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
      position: relative;
      overflow: hidden;
      text-align: left;
    }
    .feature-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: linear-gradient(90deg, var(--primary), var(--secondary));
      opacity: 0;
      transition: opacity 0.3s;
    }
    .feature-card:hover {
      transform: translateY(-4px);
      border-color: rgba(99, 102, 241, 0.25);
      box-shadow: 0 12px 30px rgba(99, 102, 241, 0.06);
    }
    .feature-card:hover::before {
      opacity: 1;
    }
    .feature-icon-wsiw {
      width: 44px;
      height: 44px;
      border-radius: 10px;
      background: rgba(99, 102, 241, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
      color: var(--primary);
    }
    .feature-icon-wsiw svg {
      width: 22px;
      height: 22px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
    }
    .feature-card h4 {
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--white);
      margin-bottom: 8px;
    }
    .feature-card p {
      font-size: 0.92rem;
      color: var(--muted);
      line-height: 1.6;
    }

    /* Screenshots Gallery */
    .screenshots-showcase {
      display: flex;
      gap: 20px;
      overflow-x: auto;
      padding: 20px 10px 40px;
      width: 100%;
      scroll-snap-type: x mandatory;
      scrollbar-width: thin;
      scrollbar-color: rgba(99, 102, 241, 0.3) transparent;
    }
    .screenshots-showcase::-webkit-scrollbar {
      height: 8px;
    }
    .screenshots-showcase::-webkit-scrollbar-thumb {
      background: rgba(99, 102, 241, 0.3);
      border-radius: 4px;
    }
    .screenshots-showcase::-webkit-scrollbar-thumb:hover {
      background: rgba(99, 102, 241, 0.5);
    }
    .phone-mockup {
      flex: 0 0 auto;
      width: 220px;
      border: 6px solid #181922;
      border-radius: 32px;
      overflow: hidden;
      box-shadow: 0 20px 40px rgba(0,0,0,0.6), 0 0 25px rgba(99, 102, 241, 0.08);
      background: #000;
      scroll-snap-align: start;
      transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    }
    .phone-mockup:hover {
      transform: translateY(-8px) scale(1.02);
      border-color: #2b2d3d;
      box-shadow: 0 28px 50px rgba(0,0,0,0.7), 0 0 35px rgba(168, 85, 247, 0.15);
    }
    .phone-mockup img {
      width: 100%;
      height: auto;
      display: block;
    }

    @media(max-width:900px) {
      .back-link-btn {
        position: static;
        margin-bottom: 20px;
        align-self: flex-start;
      }
      .wsiw-hero {
        padding-top: 100px;
      }
    }