/* ---- Base / Vars ---- */
    *,*::before,*::after{box-sizing:border-box}
    html,body{margin:0;padding:0}
    :root{
      --bg:#000; --card:#0b0b0c; --muted:#b0b4c0; --line:#1e1e22;
      --acc1:#ff2d8d; --acc2:#00e5ff; --white:#fff; --container:1240px; --radius:20px;
      --shadow:0 10px 30px rgba(0,0,0,.45);
    }
    body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial; line-height:1.65; color:var(--white); background:var(--bg)}
    .container{max-width:var(--container); margin:0 auto; padding:0 20px}
    .section{padding:72px 0}
    .btn{display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:12px; background:linear-gradient(90deg,var(--acc1),var(--acc2)); color:#000; font-weight:700; box-shadow:var(--shadow); border:none; text-decoration:none}
    .btn.ghost{background:linear-gradient(#000,#000) padding-box, linear-gradient(90deg,var(--acc1),var(--acc2)) border-box; border:1px solid transparent; color:#fff}

    /* ---- Header ---- */
    header.site{position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(3px); background: rgb(0 0 0 / 62%); border-bottom:1px solid rgba(255,255,255,.08)}
    .nav{display:flex; align-items:center; justify-content:space-between; height:64px}
    .brand{display:flex; align-items:center; gap:12px; color:var(--white); font-weight:800; text-decoration:none}
    .brand .logo{
      width:58px; height:58px; border-radius:8px;
      background:center / cover no-repeat url("/media/img/IMG_3451.webp");
    }
    .menu{display:flex; gap:1px; align-items:center; border:1px solid #f63492; border-radius:3rem; padding:5px 17px}
    .menu a{
      display:inline-block; padding:8px 12px; color:#e5e9f2; text-decoration:none;
      transition:color .2s ease, text-shadow .2s ease, filter .2s ease;
    }
    .menu a:is(:hover,:focus-visible,.active,[aria-current="page"]){
      background-image:linear-gradient(90deg,var(--acc1,#ff2d8d),var(--acc2,#00e5ff));
      -webkit-background-clip:text; background-clip:text;
      color:transparent; -webkit-text-fill-color:transparent;
      filter:brightness(1.12);
      text-shadow:0 0 10px rgb(255 255 255 / 61%);
      box-shadow:0 0 8px 0 rgb(255 255 255 / 61%);
      border-radius:2rem;
    }
    .lang button {
    background: transparent;
    color: #cfd2dc;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 6px 10px;
    }
    .lang button.active {
    background: linear-gradient(90deg, var(--acc1), var(--acc2));
    color: #000;
    font-weight: 700;
  }

  .lang {
    display: flex;
    gap: 8px;
    align-items: center;
}



    /* ---- Burger ---- */
    .burger{
      display:none; width:40px; height:40px; align-items:center; justify-content:center;
      border:1px solid var(--line); border-radius:10px; color:var(--white); background:transparent;
      position:relative; cursor:pointer; transition:border-color .25s ease, box-shadow .25s ease;
    }
    .burger:hover{box-shadow:0 6px 20px rgba(0,0,0,.35)}
    .burger .bar{
      position:absolute; width:20px; height:2px; left:50%; transform:translateX(-50%);
      background:#e5e9f2; border-radius:2px;
      transition:transform .35s cubic-bezier(.4,0,.2,1), opacity .25s ease, background .25s ease;
    }
    .burger .bar:nth-child(1){ top:13px }
    .burger .bar:nth-child(2){ top:19px }
    .burger .bar:nth-child(3){ top:25px }
    .burger.active .bar{ background:linear-gradient(90deg,var(--acc1),var(--acc2)) }
    .burger.active .bar:nth-child(1){ transform:translateX(-50%) translateY(6px) rotate(45deg) }
    .burger.active .bar:nth-child(2){ opacity:0 }
    .burger.active .bar:nth-child(3){ transform:translateX(-50%) translateY(-6px) rotate(-45deg) }

    /* ---- Mobile menu ---- */
    @media (max-width:990px){
      .burger{display:flex}
      .menu{
        position:absolute; top:64px; left:12px; right:12px;
        display:grid; grid-auto-flow:row; gap:14px;
        padding:14px 20px; border-radius:16px; border:1px solid #f63492;
        background:rgba(0,0,0,.96);
        transform-origin:top center;
        transform:translateY(-8px) scaleY(.96);
        opacity:0; pointer-events:none;
        transition:transform .35s cubic-bezier(.4,0,.2,1), opacity .3s ease;
        box-shadow:0 18px 40px rgba(0,0,0,.45);
      }
      .menu a{opacity:0; transform:translateY(-4px); transition:opacity .25s ease, transform .35s cubic-bezier(.4,0,.2,1)}
      .menu.open{transform:translateY(0) scaleY(1); opacity:1; pointer-events:auto}
      .menu.open a{opacity:1; transform:translateY(0)}
      .header-cta{display:none !important;}
    }

    /* ---- Article ---- */
    .article-hero{padding:36px 0 0}
    .back{display:inline-flex; align-items:center; gap:8px; color:#e5e9f2; text-decoration:none}
    .back:hover{filter:brightness(1.1)}
    .title{font-size:clamp(28px,6vw,46px); line-height:1.1; margin:10px 0 8px}
    .meta{color:var(--muted)}
    .cover{
      margin:18px 0 0; border-radius:16px; overflow:hidden;
      border:1px solid rgba(255,255,255,.08); background:#0b0b0c;
      box-shadow:0 20px 60px rgba(0,0,0,.45);
    }
    .cover img{display:block; width:100%; height:auto}

    .article{max-width:880px; margin:0 auto; padding:28px 0 72px}
    .ck-content{color:#e8ebf4; font-size:18px}
    .ck-content h2,.ck-content h3,.ck-content h4{color:#fff; margin:1.6em 0 .6em}
    .ck-content p{margin:.9em 0}
    .ck-content a{color:#c7ebff; text-decoration:underline}
    .ck-content blockquote{
      margin:1.2em 0; padding:14px 16px; border-left:3px solid var(--acc2);
      background:#0b0f19; border-radius:12px; color:#c8d2e4;
    }
    .ck-content code{background:#0e1731; padding:2px 6px; border-radius:6px; border:1px solid var(--line)}
    .ck-content pre{background:#0e1731; padding:14px; border-radius:12px; overflow:auto; border:1px solid var(--line)}
    .ck-content ul, .ck-content ol{padding-left:1.2rem}

    /* ---- Footer ---- */
    footer{border-top:1px solid rgba(255,255,255,.08); color:var(--muted); padding:28px 0}
    .footer-row{display:flex;     justify-content: center; gap:12px; flex-wrap:wrap}