body {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  margin: 0;
  background: #0e0b1f;
  color: #fff;
  min-height: 100vh;
}
.hero {
  background: linear-gradient(135deg, #6f00ff 0%, #00eaff 100%);
  color: #fff;
  padding-bottom: 2rem;
  position: relative;
}
.hero-bg-anim {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 0;
  pointer-events: none;
}
.navbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 2rem;
  position: relative;
  z-index: 2;
}
.logo {display:flex;align-items:center;gap:0.5em;}
.brand {font-weight:700;font-size:1.25rem;letter-spacing:1px;}
.nav-links {list-style:none;display:flex;gap:1.5em;margin:0;}
.nav-links a {color:#fff;text-decoration:none;font-weight:500;transition:color .2s;}
.nav-links a:hover {color:#00eaff;}
.lang-switcher, .footer-lang-switcher {margin-left:1.5em;}
.hero-content {text-align:center;padding:5rem 1rem 2rem;z-index:2;position:relative;}
.hero-content h1 {font-size:2.5rem;line-height:1.1;margin-bottom:1rem;}
.hero-content p {font-size:1.25rem;margin-bottom:2rem;}
.cta {display:inline-block;background:#00eaff;color:#0e0b1f;padding:0.75em 2em;border-radius:30px;font-weight:700;font-size:1.1em;text-decoration:none;box-shadow:0 2px 16px #00eaff44;transition:background .2s;}
.cta:hover {background:#6f00ff;color:#fff;}
.features-section {padding:4rem 1rem 2rem;background:#18143a;}
.features-section h2 {text-align:center;margin-bottom:2rem;}
.features-list {display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5em;max-width:1000px;margin:0 auto;}
.features-list li {background:#221b4b;padding:1.5em 1em;border-radius:16px;box-shadow:0 2px 12px #00eaff22;font-size:1.1em;}
.playground-section {padding:4rem 1rem 2rem;background:#0e0b1f;}
.playground-section h2 {text-align:center;margin-bottom:1.5rem;}
.playground-box {background:#221b4b;padding:2rem 1rem 1rem;border-radius:20px;max-width:600px;margin:0 auto;box-shadow:0 2px 18px #6f00ff22;}
.playground-tabs {background:#fff;border-radius:20px;padding:2em 1em 1.5em;box-shadow:0 2px 18px #6f00ff18;max-width:820px;margin:0 auto;}
.tab-list {display:flex;gap:2em;justify-content:flex-start;margin:0 0 2em 0;padding:0;border-bottom:2px solid #f0f0f0;}
.tab {list-style:none;cursor:pointer;padding:0.7em 2.2em 0.7em 2.2em;font-weight:600;font-size:1.1em;color:#555;position:relative;background:none;border:none;outline:none;transition:color .2s;}
.tab.active {color:#6f00ff;}
.tab.active::after {content:'';display:block;position:absolute;left:18%;right:18%;bottom:-2px;height:3px;background:#6f00ff;border-radius:2px;}
.tab:not(.active):hover {color:#00eaff;}
.tab-pane {display:none;}
.tab-pane.active {display:block;}
.playground-tabs h3 {margin-top:0;}
.playground-tabs textarea {border-radius:8px;border:1px solid #e0e0e0;background:#fafaff;color:#222;}
.playground-tabs button.playground-btn {margin-top:0.5em;}
#playground-form label {font-weight:600;}
#input-code {width:100%;border-radius:8px;padding:0.8em 1em;margin:0.8em 0 1em;background:#18143a;color:#fff;border:1px solid #00eaff44;font-size:1em;}
.playground-btn {background:#00eaff;color:#0e0b1f;padding:0.7em 2em;border-radius:24px;font-weight:700;border:none;cursor:pointer;transition:background .2s;}
.playground-btn:hover {background:#6f00ff;color:#fff;}
.playground-result {margin-top:1.5em;min-height:56px;}
.register-hint {margin-top:1em;text-align:center;}
.register-link {color:#00eaff;text-decoration:underline;cursor:pointer;font-weight:600;}
.showcase-section {padding:4rem 1rem 2rem;background:#18143a;}
.showcase-section h2 {text-align:center;margin-bottom:2rem;}
.showcase-list {display:flex;flex-wrap:wrap;gap:2em;justify-content:center;}
.showcase-item {background:#221b4b;padding:1.2em;border-radius:16px;box-shadow:0 2px 12px #00eaff22;display:flex;flex-direction:column;align-items:center;width:240px;}
.showcase-item img, .showcase-item svg {width:60px;height:60px;margin-bottom:1em;border-radius:12px;object-fit:cover;}
.showcase-desc h3 {margin:0 0 0.5em;font-size:1.1em;}
.showcase-desc p {margin:0;font-size:0.96em;opacity:0.9;}
.future-section, .painpoints-section {padding:3rem 1rem 2rem;background:#0e0b1f;}
.future-section h2, .painpoints-section h2 {text-align:center;margin-bottom:1.5rem;}
.future-section ul, .painpoints-section ul {max-width:800px;margin:0 auto;list-style:disc inside;}
footer {background:#18143a;color:#fff;padding:2rem 0 0;}
.footer-content {display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto 1rem;padding:0 2rem;}
.footer-logo {display:flex;align-items:center;gap:0.5em;}
.footer-links {display:flex;gap:1.5em;}
.footer-links a {color:#fff;text-decoration:none;transition:color .2s;}
.footer-links a:hover {color:#00eaff;}
.footer-meta {text-align:center;padding:1rem 0 0.5rem;font-size:0.97em;opacity:0.8;}
.tab-desc {display:flex;gap:2em;align-items:flex-start;justify-content:space-between;margin-bottom:1.5em;flex-wrap:wrap;}
.desc-main {flex:1 1 280px;min-width:220px;}
.desc-main h3 {margin-top:0;margin-bottom:0.5em;font-size:1.3em;font-weight:700;color:#222;}
.desc-features {list-style:disc inside;color:#6f00ff;font-size:1em;margin:0 0 0.8em 0;padding:0;}
.desc-features li {color:#333;margin-bottom:0.2em;}
.desc-resources {margin:0.7em 0 0 0;display:flex;gap:1em;flex-wrap:wrap;}
.desc-cta {display:inline-block;background:#f3f3ff;color:#6f00ff;border-radius:7px;padding:0.4em 1.4em;font-weight:600;text-decoration:none;box-shadow:0 2px 8px #6f00ff11;transition:background .2s,color .2s;}
.desc-cta:hover {background:#6f00ff;color:#fff;}
.desc-media {flex:0 0 260px;max-width:260px;}
.desc-media img {width:100%;border-radius:12px;box-shadow:0 2px 12px #00eaff44;}
@media (max-width: 700px) {
  .navbar {flex-direction:column;gap:1em;}
  .features-list, .showcase-list {grid-template-columns:1fr!important;flex-direction:column!important;}
  .footer-content {flex-direction:column;gap:1em;}
}
@media (max-width: 900px) {
  .tab-desc {flex-direction:column;gap:1em;align-items:stretch;}
  .desc-media {max-width:100%;}
  .playground-tabs {padding:1em 0.2em;}
}