:root{
  --bg:#0a0a0b; --bg2:#121214; --bg3:#18181b; --bg-card:#151518;
  --text:#fafafa; --text2:#e4e4e7; --muted:#71717a; --muted2:#a1a1aa;
  --border:#27272a; --border2:#3f3f46;
  --accent:#d6ff57; --accent-ink:#0a0a0b;
  --radius:16px; --radius-lg:24px; --pill:999px;
  --font-body:'Inter',system-ui,sans-serif; --font-head:'Space Grotesk',sans-serif;
  --max:1200px; --pad:24px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-body);-webkit-font-smoothing:antialiased;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px),
    radial-gradient(800px 400px at 20% 0%, rgba(214,255,87,.06), transparent),
    radial-gradient(600px 400px at 90% 10%, rgba(124,108,255,.06), transparent);
  background-size:32px 32px,32px 32px,auto,auto;
}
a{color:inherit;text-decoration:none}
.container{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
header{position:sticky;top:0;z-index:50;backdrop-filter:blur(20px);background:color-mix(in srgb,var(--bg) 85%,transparent);border-bottom:1px solid var(--border)}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between}
.logo-wrap{display:flex;align-items:center;gap:10px}
.logo-box{width:32px;height:32px;background:#fff;color:#000;border-radius:8px;display:grid;place-items:center;font-family:var(--font-head);font-weight:700;font-size:13px}
.logo-text b{display:block;font-size:13px;letter-spacing:-.02em;line-height:1}
.logo-text span{display:block;font-size:10px;color:var(--muted);letter-spacing:.06em}
.nav-links{display:flex;gap:28px;font-size:13px;font-weight:500}
.nav-links a{color:var(--muted)} .nav-links a:hover{color:var(--text)}
.nav-right{display:flex;align-items:center;gap:8px}
.lang-pill{display:flex;background:var(--bg3);border:1px solid var(--border);border-radius:var(--pill);padding:3px}
.lang-pill button{border:0;background:transparent;color:var(--muted);padding:6px 12px;border-radius:var(--pill);font-size:12px;font-weight:600;cursor:pointer}
.lang-pill button.active{background:#fff;color:#000}
.hero{padding:72px 0 48px;display:grid;grid-template-columns:1.15fr .85fr;gap:48px}
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:var(--pill);border:1px solid var(--border);background:var(--bg2);font-size:11px;letter-spacing:.06em;color:var(--muted2)}
.badge i{width:6px;height:6px;background:var(--accent);border-radius:50%;box-shadow:0 0 8px var(--accent);display:inline-block}
.h1{font-family:var(--font-head);font-size:clamp(32px,4.5vw,52px);line-height:.96;letter-spacing:-.05em;font-weight:700;margin:18px 0 0}
.h1 .gray{color:var(--muted2)} .h1 .lime{color:var(--accent)}
.hero-desc{color:var(--muted);font-size:15px;line-height:1.7;max-width:52ch;margin-top:20px}
.btn{height:40px;padding:0 18px;border-radius:var(--pill);border:1px solid var(--border);background:var(--bg3);font-weight:600;font-size:13px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:.2s}
.btn-primary{background:#fff;color:#000;border-color:#fff}
.btn:hover{transform:translateY(-1px)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;border-top:1px solid var(--border);margin-top:40px;padding-top:24px}
.stat-num{font-family:var(--font-head);font-size:24px;font-weight:700}
.stat-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-top:4px;line-height:1.3}
.card-right{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:22px}
.card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.kicker{font-size:11px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.lime-pill{background:var(--accent);color:var(--accent-ink);padding:6px 12px;border-radius:var(--pill);font-size:11px;font-weight:700;letter-spacing:.04em}
.bullet{position:relative;padding-left:14px;font-size:13px;color:var(--muted2);line-height:1.6;margin-top:10px}
.bullet::before{content:"";position:absolute;left:0;top:8px;width:4px;height:4px;background:var(--text);border-radius:50%}
.inner-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.mini-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:12px}
.tech-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.tech-pill{padding:6px 10px;border-radius:var(--pill);background:#1e1e22;border:1px solid var(--border);font-size:10px;letter-spacing:.06em;color:var(--muted2);font-weight:600}
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:18px;transition:.2s}
.card:hover{transform:translateY(-2px);border-color:var(--border2)}
.pill{padding:5px 10px;border-radius:var(--pill);border:1px solid var(--border);font-size:10px;background:var(--bg2);color:var(--muted2)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.timeline{border-left:1px solid var(--border);padding-left:28px;display:flex;flex-direction:column;gap:40px;position:relative}
.dot{width:10px;height:10px;background:var(--accent);border-radius:50%;position:absolute;left:-5.5px;box-shadow:0 0 0 5px var(--bg),0 0 20px var(--accent)}
.loader{width:28px;height:28px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin:40vh auto}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:1024px){.hero{grid-template-columns:1fr}.grid3{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.nav-links{display:none}.grid3,.grid2{grid-template-columns:1fr}.stats{grid-template-columns:repeat(3,1fr)}}

/* --- FIXLER --- */
.h1, .hero-desc { user-select: none; -webkit-user-select: none; outline: none !important; }
.h1:focus, .hero-desc:focus { outline: none !important; box-shadow: none !important; }
.hamburger {
  display: none;
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--text);
  font-size: 20px;
  cursor: pointer;
  place-items: center;
}
.mobile-drawer { display: none; }
@media(max-width:640px){
  .hamburger { display: grid; }
  .mobile-drawer.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 64px; left: 0; right: 0;
    background: rgba(10,10,11,0.97);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    padding: 16px 24px 24px;
    gap: 18px;
    z-index: 49;
  }
  .mobile-drawer a {
    font-size: 16px; font-weight: 600; color: var(--text2);
  }
}