:root {
  --bg:#1a1c2e; --fg:#eeeef2; --muted-fg:#8888a0; --primary:#4a9ede; --accent:#3dbfbf;
  --border:#2e3048; --card:#262840; --secondary:#303252; --secondary-fg:#c8c8d8;
  --font:"SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-display:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:var(--font)}
a{color:inherit;text-decoration:none}

/* Video */
.video-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.page{position:relative;height:100vh;overflow:hidden}
.overlay{position:relative;z-index:10;display:flex;flex-direction:column;height:100%}

/* Header */
header{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:1rem 3rem}
header .logo img{height:52px}
nav{display:flex;align-items:center;gap:1.5rem}
nav a,nav button{color:var(--muted-fg);font-size:.875rem;transition:color .2s;background:none;border:none;cursor:pointer;font-family:var(--font)}
nav a:hover,nav button:hover{color:var(--fg)}
.lang-btn{display:flex;align-items:center;gap:.25rem}
.login-btn{display:flex;align-items:center;gap:.5rem;color:var(--fg)}
.promo{background:linear-gradient(135deg,var(--primary),var(--accent));border-radius:.5rem;padding:.375rem .75rem;font-size:.75rem;color:#fff;white-space:nowrap;position:relative;overflow:hidden}
.promo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);animation:shimmer 2s infinite}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* Home */
main.home-main{flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 3rem}
h1.hero{font-family:var(--font-display);font-size:6rem;font-weight:700;letter-spacing:.1em;animation:fadeIn .8s ease both}
@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.downloads{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem;animation:fadeIn .8s .3s ease both}
.downloads a{opacity:.85;transition:transform .2s,opacity .2s}
.downloads a:hover{transform:translateY(-2px);opacity:1}
.downloads img{height:8.25rem}

/* Footer */
footer{padding:2rem 3rem;z-index:10}
.footer-links{display:flex;flex-wrap:wrap;gap:1.5rem;font-size:.875rem;color:var(--muted-fg)}
.footer-links a:hover{color:var(--fg)}
.footer-links .item{display:flex;align-items:center;gap:.5rem}

/* Content pages */
.content{min-height:100vh;background:var(--bg)}
.content main{max-width:56rem;margin:0 auto;padding:7rem 1.5rem 4rem}

/* Blog list */
.blog-card{display:block;border:1px solid var(--border);background:var(--card);border-radius:1rem;padding:1.5rem;margin-bottom:1.5rem;transition:border-color .2s,background .2s}
.blog-card:hover{border-color:rgba(74,158,222,.3);background:rgba(38,40,64,.8)}
.blog-card:hover .read-more{opacity:1}
.blog-card:hover h2{color:var(--primary)}
.blog-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.75rem;color:var(--muted-fg)}
.tag{background:rgba(74,158,222,.1);color:var(--primary);padding:.125rem .5rem;border-radius:.375rem;font-weight:500}
.badge{border:1px solid;padding:.0625rem .375rem;border-radius:.375rem;font-size:.75rem;font-weight:500}
.blog-card h2{margin-top:.75rem;font-size:1.25rem;font-weight:600;transition:color .2s}
.blog-card p{margin-top:.5rem;font-size:.875rem;color:var(--muted-fg);line-height:1.6}
.read-more{margin-top:1rem;font-size:.875rem;color:var(--primary);opacity:0;transition:opacity .2s;display:flex;align-items:center;gap:.25rem}

/* Blog post */
.back-link{display:inline-flex;align-items:center;gap:.25rem;font-size:.875rem;color:var(--muted-fg);transition:color .2s}
.back-link:hover{color:var(--fg)}
.post-title{margin-top:1rem;font-family:var(--font-display);font-size:2rem;font-weight:700;line-height:1.3}
.post-body p{color:var(--muted-fg);line-height:1.7;font-size:.9375rem;margin-bottom:1rem}
.post-nav{margin-top:3rem;display:flex;justify-content:space-between;border-top:1px solid var(--border);padding-top:1.5rem}
.post-nav a{font-size:.875rem;color:var(--muted-fg);display:flex;align-items:center;gap:.25rem;transition:color .2s}
.post-nav a:hover{color:var(--fg)}
.related{margin-top:3rem;border-top:1px solid var(--border);padding-top:2rem}
.related h3{font-size:1.125rem;font-weight:600;margin-bottom:1rem}
.related-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.related-card{border:1px solid var(--border);background:var(--card);border-radius:.75rem;padding:1rem;transition:border-color .2s}
.related-card:hover{border-color:rgba(74,158,222,.3)}
.related-card:hover h4{color:var(--primary)}
.related-card h4{font-size:.875rem;font-weight:500;margin-top:.5rem;transition:color .2s;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.related-card .excerpt{font-size:.75rem;color:var(--muted-fg);margin-top:.25rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Pagination */
.pagination{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:2.5rem}
.page-num{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:.5rem;font-size:.875rem;font-weight:500;color:var(--muted-fg);border:none;background:none;cursor:pointer;transition:background .2s,color .2s}
.page-num:hover{color:var(--fg);background:var(--secondary)}
.page-num-current{background:var(--primary)!important;color:#fff!important}
.page-num:disabled{opacity:.3;cursor:not-allowed}

/* Help */
.help-search{position:relative;max-width:32rem;margin:2rem auto 0}
.help-search input{width:100%;border:1px solid var(--border);background:var(--card);border-radius:.75rem;padding:.75rem 1rem .75rem 2.75rem;font-size:.875rem;color:var(--fg);outline:none;transition:border-color .2s}
.help-search input:focus{border-color:var(--primary)}
.help-search svg{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--muted-fg)}
.help-section{border:1px solid var(--border);background:var(--card);border-radius:1rem;padding:1.5rem;margin-bottom:1.5rem}
.help-section .section-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}
.help-section .icon-box{width:2.25rem;height:2.25rem;display:flex;align-items:center;justify-content:center;border-radius:.5rem;background:rgba(74,158,222,.1)}
.help-section .icon-box svg{width:1rem;height:1rem;color:var(--primary)}
.help-section h2{font-size:1.125rem;font-weight:600}
.faq-item{border-bottom:1px solid var(--border)}
.faq-item:last-child{border-bottom:none}
.faq-q{display:flex;width:100%;align-items:center;justify-content:space-between;padding:1rem 0;text-align:left;font-size:.875rem;background:none;border:none;color:var(--fg);cursor:pointer;transition:color .2s;font-family:var(--font)}
.faq-q:hover{color:var(--primary)}
.faq-q svg{width:1rem;height:1rem;color:var(--muted-fg);transition:transform .2s;flex-shrink:0}
.faq-q.open svg{transform:rotate(180deg)}
.faq-a{padding:0 0 1rem;font-size:.875rem;color:var(--muted-fg);line-height:1.6;display:none}
.faq-a.open{display:block}
.help-contact{border:1px solid var(--border);background:var(--card);border-radius:1rem;padding:2rem;text-align:center;margin-top:3.5rem}
.help-contact h2{font-size:1.125rem;font-weight:600}
.help-contact p{margin-top:.5rem;font-size:.875rem;color:var(--muted-fg)}
.help-contact .btns{margin-top:1.5rem;display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}
.btn-primary{background:var(--primary);color:#fff;border:none;border-radius:.75rem;padding:.625rem 1.5rem;font-size:.875rem;font-weight:500;cursor:pointer;transition:opacity .2s;font-family:var(--font);text-decoration:none}
.btn-primary:hover{opacity:.9}
.btn-secondary{background:var(--secondary);color:var(--secondary-fg);border:none;border-radius:.75rem;padding:.625rem 1.5rem;font-size:.875rem;font-weight:500;cursor:pointer;transition:background .2s;font-family:var(--font);text-decoration:none}
.btn-secondary:hover{background:var(--muted-fg);color:var(--fg)}

@media(max-width:768px){
  header{padding:1rem 1.5rem}
  main.home-main{padding:0 1.5rem}
  h1.hero{font-size:3.5rem}
  .downloads img{height:6rem}
  footer{padding:1.5rem}
  .hide-mobile{display:none}
  .content main{padding:6rem 1rem 3rem}
  .post-title{font-size:1.5rem}
}