:root{
    color-scheme: dark;
    --bg:#000000;
    --ink:#EAE5EC;
    --ink-60:rgba(234,229,236,.6);
    --ink-35:rgba(234,229,236,.35);
    --line:rgba(234,229,236,.14);
    --line-2:rgba(234,229,236,.3);
    --accent:#6C5CE7;
    --accent-2:#B9B2F5;
    --card:#0C0C0F;
    --card-2:#141419;
    /* Onest подхватывает кириллицу: у Outfit и Figtree её нет вовсе,
       и русские тексты до этого падали на системный шрифт. */
    --display:"Outfit", "Onest", system-ui, sans-serif;
    --body:"Figtree", "Onest", system-ui, -apple-system, sans-serif;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);
    font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;
  }
  h1,h2,h3,h4,p{margin:0}
  ul{margin:0;padding:0;list-style:none}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1280px;margin:0 auto;padding-inline:28px}
  @media(max-width:640px){.wrap{padding-inline:18px}}

  /* ---------------- preloader ---------------- */
  #pre{
    position:fixed;inset:0;z-index:200;background:#07070A;display:grid;place-items:center;
  }
  #pre .inner{text-align:center;width:min(440px,84vw)}
  #pre .nm{font-family:var(--display);font-weight:900;font-size:clamp(28px,6vw,54px);letter-spacing:-.04em;line-height:1}
  #pre .bar{margin-top:22px;height:2px;background:rgba(234,229,236,.16);overflow:hidden}
  #pre .bar i{display:block;height:100%;width:0;background:var(--ink)}
  #pre .row{
    margin-top:12px;display:flex;justify-content:space-between;
    font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-35);
  }
  body.loaded #pre{transform:translateY(-100%);transition:transform .9s cubic-bezier(.76,0,.24,1)}

  /* ---------------- header ---------------- */
  .top{
    position:fixed;top:0;left:0;right:0;z-index:90;padding:22px 28px;
    display:flex;align-items:flex-start;gap:20px;pointer-events:none;
    padding-top:calc(22px + env(safe-area-inset-top,0px));
  }
  /* Фон шапки. Она висит поверх текста, и при прокрутке заголовки лезли сквозь
     неё. Градиент до прозрачного вместо полосы с краем: фон страницы чёрный,
     затемнения хватает, «стекло» с размытием тут ни к чему. */
  .top::before{
    content:"";position:absolute;left:0;right:0;top:0;height:calc(100% + 54px);
    background:linear-gradient(180deg,
      #000 0%, #000 56%, rgba(0,0,0,.86) 74%, rgba(0,0,0,.45) 88%, rgba(0,0,0,0) 100%);
    pointer-events:none;z-index:-1;
  }
  @media(max-width:640px){.top{padding-inline:18px}}
  .top .id{pointer-events:auto;display:flex;align-items:center;gap:10px}
  /* Знак наследует цвет: в шапке акцентный, в тёмных блоках — текстовый. */
  .top .mark{height:26px;width:auto;flex:none;color:var(--accent-2);display:block}
  @media(max-width:700px){.top .mark{height:22px}}
  .top .id b{display:block;font-size:14px;font-weight:600;letter-spacing:-.01em}
  .top .id span{display:block;font-size:12.5px;color:var(--ink-35);margin-top:2px}
  .top nav{margin-left:auto;display:flex;gap:26px;pointer-events:auto}
  .top nav a{
    position:relative;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-60);
    height:16px;overflow:hidden;display:block;
  }
  .top nav a i{display:block;font-style:normal;transition:transform .42s cubic-bezier(.76,0,.24,1)}
  .top nav a:hover i{transform:translateY(-16px)}
  .top nav a i em{display:block;height:16px;line-height:16px;font-style:normal;color:var(--ink)}
  .top .langs{display:flex;gap:9px;pointer-events:auto;margin-left:4px}
  .top .langs a{text-decoration:none;cursor:pointer;
    background:none;border:0;padding:0;cursor:pointer;font:inherit;font-size:12px;letter-spacing:.12em;
    color:var(--ink-35);
  }
  .top .langs a[aria-pressed="true"]{color:var(--ink)}
  @media(max-width:820px){.top nav{display:none}}

  /* ---------------- hero ---------------- */
  .hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:120px 60px;position:relative}
  .hero .hi{font-size:clamp(15px,2vw,19px);color:var(--ink-60);font-weight:300}
  .hero .nm{
    font-family:var(--display);font-weight:900;letter-spacing:-.05em;line-height:.86;
    font-size:clamp(54px,13.5vw,186px);text-transform:uppercase;margin-top:6px;
  }
  .hero .nm span{display:block;overflow:hidden}
  .hero .nm span i{display:block;font-style:normal}
  .hero .role{
    margin-top:26px;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
    font-family:var(--display);font-weight:300;font-size:clamp(20px,3.4vw,40px);letter-spacing:-.02em;
  }
  .flip{
    display:inline-block;height:1.08em;overflow:hidden;vertical-align:bottom;position:relative;
    font-weight:700;color:var(--accent-2);
  }
  .flip i{display:block;font-style:normal;transition:transform .7s cubic-bezier(.76,0,.24,1)}
  .flip i em{display:block;height:1.08em;line-height:1.08em;font-style:normal;white-space:nowrap}
  .hero .lede{
    margin-top:28px;max-width:46ch;color:var(--ink-60);font-weight:300;
    font-size:clamp(15px,1.8vw,18.5px);line-height:1.6;
  }
  .hero .lede b{color:var(--ink);font-weight:600}
  .hero .meta{
    margin-top:46px;display:flex;gap:40px;flex-wrap:wrap;
    font-size:13px;color:var(--ink-35);letter-spacing:.02em;
  }
  .hero .meta b{display:block;color:var(--ink);font-family:var(--display);font-size:26px;font-weight:700;letter-spacing:-.02em;margin-bottom:5px;text-transform:none}
  .scrollcue{
    position:absolute;left:28px;bottom:34px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-35);
    display:flex;align-items:center;gap:10px;
  }
  .scrollcue i{display:block;width:1px;height:26px;background:linear-gradient(var(--ink),transparent);animation:cue 2s ease-in-out infinite}
  @keyframes cue{0%{transform:translateY(-8px);opacity:0}45%{opacity:1}100%{transform:translateY(10px);opacity:0}}
  @media(max-width:640px){.scrollcue{left:18px}}

  /* ---------------- marquee ---------------- */
  .marq{border-block:1px solid var(--line);overflow:hidden;padding-block:20px}
  .marq .run{display:flex;gap:40px;width:max-content;white-space:nowrap;will-change:transform}
  .marq .run span{
    font-family:var(--display);font-weight:700;font-size:clamp(28px,5.4vw,66px);letter-spacing:-.035em;
    text-transform:uppercase;color:var(--ink);display:flex;align-items:center;gap:40px;
  }
  .marq .run span::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--accent);flex:none}

  /* ---------------- sections ---------------- */
  section{padding-block:110px}
  .sec-title{
    font-family:var(--display);font-weight:300;font-size:clamp(30px,5.6vw,66px);letter-spacing:-.04em;line-height:1.02;
  }
  .sec-title b{font-weight:700;display:block}
  .sec-note{margin-top:18px;color:var(--ink-60);font-weight:300;max-width:52ch;font-size:16.5px}

  /* career */
  .career{margin-top:60px;display:grid;gap:14px}
  .job{
    border:1px solid var(--line);border-radius:30px;padding:30px 32px;background:var(--card);
    display:grid;grid-template-columns:1fr 150px;gap:24px;align-items:start;
    transition:border-color .4s,background .4s,transform .4s cubic-bezier(.2,.8,.3,1);
  }
  .job:hover{border-color:var(--line-2);background:var(--card-2);transform:translateY(-3px)}
  @media(max-width:760px){.job{grid-template-columns:1fr;padding:24px 22px;border-radius:24px}}
  .job h3{font-family:var(--display);font-size:clamp(20px,2.6vw,27px);font-weight:700;letter-spacing:-.025em;line-height:1.1}
  .job .org{margin-top:7px;font-size:13px;letter-spacing:.02em;color:var(--accent-2)}
  .job p{margin-top:16px;color:var(--ink-60);font-weight:300;font-size:15.5px;max-width:68ch}
  .job .yr{
    font-family:var(--display);font-size:clamp(22px,3vw,32px);font-weight:700;letter-spacing:-.03em;
    text-align:right;color:var(--ink-35);
  }
  @media(max-width:760px){.job .yr{text-align:left;font-size:20px}}
  .job .tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
  .job .tags span{font-size:11.5px;letter-spacing:.06em;color:var(--ink-60);border:1px solid var(--line);border-radius:999px;padding:5px 11px}
  .job.todo{border-style:dashed;background:transparent}
  .job.todo h3{color:var(--ink-60)}

  /* work */
  .works{margin-top:56px;border-top:1px solid var(--line)}
  .work{cursor:pointer;
    width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);
    text-align:left;font:inherit;color:inherit;cursor:pointer;padding:0;display:block;
  }
  .work .row{
    display:grid;grid-template-columns:76px 1fr 220px 44px;gap:24px;align-items:center;padding:30px 0;
    transition:padding-left .45s cubic-bezier(.76,0,.24,1);
  }
  .work:hover .row{padding-left:18px}
  .work:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  @media(max-width:900px){
    .work .row{grid-template-columns:52px 1fr 36px;gap:8px 16px;padding:24px 0}
    .work .kind{grid-column:2;margin-top:4px}
  }
  .work .no{font-family:var(--display);font-size:15px;font-weight:600;color:var(--ink-35)}
  .work h3{font-family:var(--display);font-size:clamp(23px,3.6vw,42px);font-weight:700;letter-spacing:-.04em;line-height:1}
  .work .kind{font-size:13.5px;color:var(--ink-60);font-weight:300}
  .work .arr{
    width:42px;height:42px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;
    justify-self:end;font-size:16px;color:var(--ink-60);transition:background .35s,color .35s,border-color .35s,transform .35s;
  }
  .work:hover .arr{background:var(--ink);color:#000;border-color:var(--ink);transform:rotate(-45deg)}
  .work .panel{overflow:hidden;height:0}
  .work .panel .in{padding:0 0 32px;display:grid;grid-template-columns:1.3fr 1fr;gap:32px}
  @media(max-width:900px){.work .panel .in{grid-template-columns:1fr;gap:20px}}
  .work .panel p{color:var(--ink-60);font-weight:300;font-size:15.5px;line-height:1.65}
  .work .panel .tools b{
    display:block;font-size:11.5px;letter-spacing:.02em;color:var(--ink-35);margin-bottom:12px;font-weight:500;
  }
  .work .panel .tools span{
    display:inline-block;font-size:12.5px;color:var(--ink);border:1px solid var(--line);border-radius:999px;
    padding:6px 13px;margin:0 6px 6px 0;
  }
  .work .panel .facts{margin-top:20px;display:grid;gap:11px}
  .work .panel .facts li{display:grid;grid-template-columns:auto 1fr;gap:12px;font-size:14.5px;color:var(--ink-60);font-weight:300;line-height:1.5}
  .work .panel .facts li::before{
    content:attr(data-k);font-size:10px;letter-spacing:.02em;color:var(--accent-2);
    border:1px solid rgba(185,178,245,.4);border-radius:999px;padding:3px 9px;height:max-content;white-space:nowrap;
  }
  .work .panel .askmark{
    margin-top:22px;font:inherit;font-size:12px;letter-spacing:.02em;cursor:pointer;
    background:transparent;color:var(--ink);border:1px solid var(--line-2);border-radius:999px;padding:13px 22px;
    transition:background .3s,color .3s;
  }
  .work .panel .askmark:hover{background:var(--ink);color:#000}

  /* kicker + actions */
  .kicker{
    font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-35);
    display:flex;align-items:center;gap:14px;
  }
  .kicker::after{content:"";flex:1;max-width:220px;height:1px;background:var(--line)}
  .acts{display:flex;margin-top:40px;border:1px solid var(--ink);width:max-content;max-width:100%;flex-wrap:wrap;border-radius:999px;overflow:hidden}
  .acts button,.acts a{
    font:inherit;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;
    padding:16px 26px;border:0;background:transparent;color:var(--ink);
    transition:background .25s,color .25s;
  }
  .acts .solid{background:var(--ink);color:#000}
  .acts .solid:hover{background:transparent;color:var(--ink)}
  .acts .plain,.acts .cv{border-left:1px solid var(--ink)}
  .acts .plain:hover,.acts .cv:hover{background:var(--ink);color:#000}
  /* На узком экране кнопки переносились внутри общей рамки и выглядели
     сломанными: делаем из них два самостоятельных блока во всю ширину. */
  @media(max-width:560px){
    .acts{border:0;border-radius:0;width:100%;flex-direction:column;gap:10px;overflow:visible}
    .acts button,.acts a{width:100%;padding:16px 20px;border:1px solid var(--ink);border-radius:999px;text-align:center;justify-content:center}
    .acts .plain,.acts .cv{border-left:1px solid var(--ink)}
  }

  /* process */
  .proc{margin-top:56px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
  @media(max-width:1000px){.proc{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:620px){.proc{grid-template-columns:1fr}}
  .step{
    border:1px solid var(--line);border-radius:26px;padding:26px 22px;background:var(--card);
    display:flex;flex-direction:column;gap:11px;transition:border-color .4s,transform .4s cubic-bezier(.2,.8,.3,1);
  }
  .step:hover{border-color:var(--line-2);transform:translateY(-3px)}
  .step .n{
    font-family:var(--display);font-size:40px;font-weight:700;letter-spacing:-.04em;
    color:transparent;-webkit-text-stroke:1px var(--line-2);line-height:1;
  }
  .step h3{font-family:var(--display);font-size:17.5px;font-weight:700;letter-spacing:-.02em;line-height:1.25}
  .step p{font-size:14px;color:var(--ink-60);font-weight:300;line-height:1.6}

  /* roles strip */
  .roles{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  @media(max-width:900px){.roles{grid-template-columns:1fr}}
  .rolecard{
    border:1px solid var(--line);border-radius:24px;padding:22px;background:var(--card);
    display:flex;flex-direction:column;gap:9px;transition:border-color .4s,transform .4s cubic-bezier(.2,.8,.3,1);
  }
  .rolecard:hover{border-color:var(--line-2);transform:translateY(-3px)}
  .rolecard h3{font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:-.015em}
  .rolecard p{font-size:14px;color:var(--ink-60);font-weight:300;line-height:1.55}
  .rolecard .lvl{
    margin-top:auto;padding-top:14px;display:flex;align-items:center;gap:10px;font-size:10.5px;
    letter-spacing:.02em;color:var(--ink-35);
  }
  .rolecard .lvl i{flex:1;height:3px;background:rgba(234,229,236,.12);border-radius:3px;overflow:hidden;display:block}
  .rolecard .lvl i b{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2))}

  /* trust line + proof */
  .trust{
    margin-top:26px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
    font-size:12.5px;color:var(--ink-35);
  }
  .trust i{display:block;width:6px;height:6px;border-radius:50%;background:#7BE0A8;box-shadow:0 0 10px #7BE0A8}
  .proof{margin-top:30px;display:flex;align-items:flex-end;gap:7px;height:56px}
  .proof div{flex:none;width:34px;display:flex;flex-direction:column;align-items:center;gap:7px}
  .proof i{display:block;width:100%;background:linear-gradient(180deg,var(--accent-2),var(--accent));border-radius:4px}
  .proof span{font-size:10px;letter-spacing:.02em;color:var(--ink-35)}

  /* services */
  .svc{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  @media(max-width:1000px){.svc{grid-template-columns:1fr}}
  .svc .card{
    border:1px solid var(--line);border-radius:30px;padding:28px 26px;background:var(--card);
    display:flex;flex-direction:column;gap:11px;transition:border-color .4s,transform .4s cubic-bezier(.2,.8,.3,1);
  }
  .svc .card:hover{border-color:var(--line-2);transform:translateY(-3px)}
  .svc .card b.n{font-size:11.5px;letter-spacing:.18em;color:var(--accent-2);font-weight:500}
  .svc .card h3{font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
  .svc .card p{font-size:14.5px;color:var(--ink-60);font-weight:300;line-height:1.6}
  .svc .card .pf{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-35)}

  /* faq */
  .faq{margin-top:50px;border-top:1px solid var(--line)}
  .qa{border-bottom:1px solid var(--line);padding:26px 0;display:grid;grid-template-columns:1fr 1.25fr;gap:30px}
  @media(max-width:900px){.qa{grid-template-columns:1fr;gap:10px}}
  .qa h3{font-family:var(--display);font-size:clamp(18px,2.4vw,24px);font-weight:700;letter-spacing:-.025em;line-height:1.25}
  .qa p{color:var(--ink-60);font-weight:300;font-size:15.5px;line-height:1.65}
  .qa.ask{grid-template-columns:1fr auto;align-items:center;width:100%;text-align:left;
    background:none;border:0;border-bottom:1px solid var(--line);color:inherit;cursor:pointer;
    font:inherit;transition:padding-left .25s ease,opacity .25s ease}
  .qa.ask .go{color:var(--ink-40);font-size:20px;transition:transform .25s ease,color .25s ease}
  .qa.ask:hover{padding-left:10px}
  .qa.ask:hover .go{transform:translateX(6px);color:var(--ink)}
  .qa.ask:focus-visible{outline:2px solid var(--acc);outline-offset:4px}
  @media(max-width:900px){.qa.ask{grid-template-columns:1fr auto;gap:16px}}

  /* lessons */
  .lessons{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  @media(max-width:1000px){.lessons{grid-template-columns:1fr}}
  .lesson{
    border:1px solid var(--line);border-radius:30px;padding:28px 26px;background:var(--card);
    display:flex;flex-direction:column;gap:12px;transition:border-color .4s,transform .4s cubic-bezier(.2,.8,.3,1);
  }
  .lesson:hover{border-color:var(--line-2);transform:translateY(-3px)}
  .lesson .cost{font-size:11.5px;letter-spacing:.02em;color:#E0A1B8}
  .lesson h3{font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.22}
  .lesson p{font-size:14.5px;color:var(--ink-60);font-weight:300;line-height:1.6}
  .lesson .fix{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);font-size:14px;line-height:1.55}
  .lesson .fix b{
    display:block;font-size:10.5px;letter-spacing:.02em;color:var(--accent-2);
    margin-bottom:7px;font-weight:500;
  }

  /* techstack */
  .stack{margin-top:54px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
  @media(max-width:1000px){.stack{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:560px){.stack{grid-template-columns:1fr}}
  .stack .col{border:1px solid var(--line);border-radius:30px;padding:28px 24px;background:var(--card)}
  .stack h3{font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:-.01em}
  .stack ul{margin-top:18px;display:grid;gap:10px}
  .stack li{font-size:14.5px;color:var(--ink-60);font-weight:300}

  /* mark chat */
  .markwrap{margin-top:54px;border:1px solid var(--line);border-radius:30px;background:var(--card);overflow:hidden}
  .mk-head{display:flex;align-items:center;gap:14px;padding:22px 26px;border-bottom:1px solid var(--line)}
  .mk-head .dot{
    width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;
    background:linear-gradient(140deg,var(--accent),var(--accent-2));color:#07070A;font-family:var(--display);font-weight:900;font-size:17px;
  }
  .mk-head b{display:block;font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:-.01em}
  .mk-head span{display:block;font-size:12.5px;color:var(--ink-35);margin-top:2px}
  .mk-head .mode{
    margin-left:auto;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2);
    border:1px solid rgba(185,178,245,.4);border-radius:999px;padding:6px 12px;white-space:nowrap;
  }
  .mk-msgs{padding:24px 26px;display:flex;flex-direction:column;gap:18px;max-height:330px;overflow-y:auto}
  .mk-msg{max-width:84%;font-size:15px;line-height:1.6}
  .mk-msg .nm{font-size:10.5px;letter-spacing:.02em;color:var(--ink-35);margin-bottom:7px}
  .mk-msg .tx{white-space:pre-wrap;word-break:break-word;color:var(--ink-60);font-weight:300}
  .mk-msg.bot .tx{color:var(--ink)}
  .mk-msg.me{align-self:flex-end;text-align:right}
  .mk-msg.me .tx{color:var(--accent-2)}
  .typing{display:inline-flex;gap:5px;align-items:center}
  .typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-35);animation:dot 1.2s ease-in-out infinite;display:block}
  .typing i:nth-child(2){animation-delay:.18s}
  .typing i:nth-child(3){animation-delay:.36s}
  @keyframes dot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
  .mk-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 26px 18px}
  .mk-chips button{
    font:inherit;font-size:12.5px;background:transparent;color:var(--ink-60);border:1px solid var(--line);
    border-radius:999px;padding:9px 15px;cursor:pointer;transition:color .3s,border-color .3s;
  }
  .mk-chips button:hover{color:var(--ink);border-color:var(--line-2)}
  .mk-form{display:flex;gap:12px;padding:18px 20px 20px;border-top:1px solid var(--line)}
  .mk-form input{
    flex:1;min-width:0;background:transparent;border:1px solid var(--line);border-radius:999px;
    padding:15px 20px;color:var(--ink);font:inherit;font-size:15px;outline:none;transition:border-color .3s;
  }
  .mk-form input:focus{border-color:var(--accent)}
  .mk-form button{
    border:0;border-radius:999px;padding:0 28px;cursor:pointer;font:inherit;font-size:12.5px;
    letter-spacing:.14em;text-transform:uppercase;background:var(--ink);color:#000;transition:opacity .3s;
  }
  .mk-form button:disabled{opacity:.4;cursor:default}

  /* contact */
  .contact{padding-bottom:120px}
  .contact .big{
    font-family:var(--display);font-weight:900;font-size:clamp(46px,12vw,170px);letter-spacing:-.05em;
    line-height:.86;text-transform:uppercase;
  }
  .cgrid{margin-top:60px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  @media(max-width:860px){.cgrid{grid-template-columns:1fr}}
  .cbox{border:1px solid var(--line);border-radius:30px;padding:28px 26px;background:var(--card)}
  .cbox b{display:block;font-size:11.5px;letter-spacing:.02em;color:var(--ink-35)}
  .cbox span{display:block;margin-top:14px;font-family:var(--display);font-size:clamp(15px,1.7vw,20px);font-weight:600;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cbox .sm{display:flex;gap:16px;margin-top:14px;flex-wrap:wrap}
  .cbox .sm a{font-size:14.5px;color:var(--ink-60);border-bottom:1px solid var(--line);padding-bottom:2px}
  .cbox .sm a:hover{color:var(--ink);border-color:var(--ink)}
  .cbox button{
    margin-top:16px;font:inherit;font-size:11px;letter-spacing:.02em;cursor:pointer;
    background:transparent;border:1px solid var(--line);border-radius:999px;padding:9px 16px;color:var(--ink-60);
  }
  .cbox button:hover{color:var(--ink);border-color:var(--line-2)}
    .mk-legal{margin:14px 2px 0;font-size:11px;color:var(--ink-35)}
  .mk-legal a{color:var(--ink-35);text-decoration:underline;text-underline-offset:2px}
  .mk-legal a:hover{color:var(--ink-60)}
  @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

  /* вынесено из разметки, чтобы политика безопасности не разрешала инлайн-стили */
  .trust-brand{margin-top:14px}
  .dot-acc{background:#B9B2F5;box-shadow:0 0 10px #B9B2F5}

  /* невидимая проверка Turnstile: места в вёрстке не занимает */
  #ts-box{position:fixed;bottom:0;left:0;width:0;height:0;overflow:hidden}