:root{ --ink:#0a0c10;--ink2:#0e1116;--panel:#12161d;--line:rgba(255,255,255,.09); --tx:#e6e8ec;--mut:#8b939e;--amb:#e0a83d;--amb2:#f0c46e;--hot:#d4664a; --r:14px;--w:1180px;--ease:cubic-bezier(.22,1,.36,1); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ background:var(--ink);color:var(--tx); font:400 17px/1.6 "Golos Text",ui-sans-serif,sans-serif; -webkit-font-smoothing:antialiased;overflow-x:hidden; } /* Класс ставит i18n.js в и снимает сразу после перевода: англоязычному посетителю не должен мелькнуть русский текст. Русским класс не ставится вовсе. */ html.i18n-busy body{visibility:hidden} body::before{ content:"";position:fixed;inset:0;z-index:-2;pointer-events:none; background: radial-gradient(60rem 40rem at 78% -10%,rgba(224,168,61,.14),transparent 60%), radial-gradient(50rem 30rem at 0% 20%,rgba(70,110,150,.10),transparent 65%), linear-gradient(var(--line) 1px,transparent 1px) 0 0/100% 88px, linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/88px 100%; mask-image:linear-gradient(180deg,#000 0,#000 60%,transparent 100%); } .grain{ position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.035; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } h1,h2,h3{font-family:"Unbounded",sans-serif;font-weight:600;letter-spacing:-.02em;line-height:1.12} .mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase} .dim{color:var(--mut)} a{color:inherit;text-decoration:none} /* header */ .hdr{ position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:18px; padding:12px max(24px,calc((100vw - var(--w))/2)); background:rgba(10,12,16,.72);backdrop-filter:blur(14px); border-bottom:1px solid var(--line); } .brand{display:flex;align-items:center;gap:10px;min-width:0;font-family:"Unbounded",sans-serif;font-size:15px;letter-spacing:.18em} .brand-mark{width:22px;height:22px;flex:none;color:var(--amb)} /* Шапка — flex-строка: без этого длинное название на узком экране либо переносится, либо выдавливает переключатель языка и кнопку за край. */ .brand-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hdr .btn{flex:none;white-space:nowrap} .nav{display:flex;gap:26px;margin-left:auto;margin-right:8px;font-size:14px;color:var(--mut)} .nav a{transition:color .2s} .nav a:hover{color:var(--tx)} /* buttons */ .btn{ font:500 15px/1 "Golos Text",sans-serif;color:#140f04;cursor:pointer; background:linear-gradient(180deg,var(--amb2),var(--amb)); border:0;border-radius:10px;padding:14px 22px; transition:transform .18s var(--ease),box-shadow .25s; box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 8px 24px -12px rgba(224,168,61,.9); } .btn:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 16px 34px -14px rgba(224,168,61,.95)} .btn:active{transform:translateY(0)} .btn-sm{padding:10px 16px;font-size:14px} .btn-lg{padding:17px 34px;font-size:17px} .btn-full{width:100%;margin-top:6px} .btn-ghost{ background:none;color:var(--tx);border:1px solid var(--line); box-shadow:none;padding:14px 22px;display:inline-flex;align-items:center;justify-content:center; } .btn-ghost:hover{border-color:rgba(224,168,61,.45);box-shadow:none} :focus-visible{outline:2px solid var(--amb);outline-offset:3px} /* Короткая подпись кнопки в шапке. В HTML она помечена атрибутом hidden, поэтому скрыта даже без этого файла — если style.css почему-то не доехал, на кнопке окажется одна подпись, а не две сразу. */ .lbl-short{display:none} /* language switch — активный язык подсвечивается на самой кнопке. Раньше поверх кнопок ездил отдельно позиционированный «бегунок»: его геометрия зависела от ширины кнопок и padding контейнера, и любое расхождение было видно глазом. */ .lang{ display:flex;flex:none;gap:2px;padding:3px; border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.03); } .lang-btn{ width:42px;padding:6px 0;cursor:pointer;border-radius:999px; background:none;border:1px solid transparent;color:var(--mut); font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.12em; line-height:1;text-align:center; transition:color .2s,background-color .2s,border-color .2s; } .lang-btn:hover{color:var(--tx)} .lang-btn[aria-pressed=true]{ color:var(--amb2);border-color:rgba(224,168,61,.45); background:linear-gradient(180deg,rgba(224,168,61,.22),rgba(224,168,61,.08)); } /* hero */ .hero{ max-width:var(--w);margin:0 auto;padding:clamp(22px,3vw,40px) 24px clamp(34px,5vw,64px); display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,64px);align-items:center; } .kicker{display:flex;align-items:center;gap:10px;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin-bottom:18px} .pulse{width:7px;height:7px;border-radius:50%;background:var(--amb);animation:pulse 2.4s infinite} @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(224,168,61,.6)}50%{box-shadow:0 0 0 7px rgba(224,168,61,0)}} h1{font-size:clamp(32px,4.5vw,56px)} h1 em{font-style:normal;color:var(--amb);text-shadow:0 0 40px rgba(224,168,61,.35)} .lead{color:var(--mut);font-size:clamp(16px,1.4vw,19px);margin-top:20px;max-width:34em} .hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px} /* feed */ .feed{ position:relative;overflow:hidden;background:linear-gradient(180deg,var(--panel),var(--ink2)); border:1px solid var(--line);border-radius:var(--r);padding:18px; box-shadow:0 40px 80px -50px #000; } .feed-top{display:flex;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid var(--line);color:var(--amb)} .feed-list{list-style:none;display:grid;gap:2px} .feed-list li{ display:grid;grid-template-columns:auto auto;gap:6px 10px;align-items:center; padding:14px 4px;border-bottom:1px solid var(--line); opacity:0;animation:in .7s var(--ease) forwards; } .feed-list li:last-child{border:0} .feed-list li:nth-child(1){animation-delay:.15s} .feed-list li:nth-child(2){animation-delay:.35s} .feed-list li:nth-child(3){animation-delay:.55s} .feed-list li:nth-child(4){animation-delay:.75s} @keyframes in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .feed-list p{grid-column:1/-1;font-size:14.5px;color:var(--mut);line-height:1.45} .feed-list .src{ font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11.5px; color:var(--amb);opacity:.8;word-break:break-all;margin-top:8px; } .feed-list .note{ font-size:13.5px;color:var(--tx);opacity:.72;margin-top:8px; border-left:2px solid rgba(224,168,61,.4);padding-left:10px; } .tag{ font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase; padding:4px 8px;border-radius:6px;background:rgba(255,255,255,.06);color:var(--tx); } .tag-hot{background:rgba(212,102,74,.16);color:#eb937a} .tag-warn{background:rgba(224,168,61,.16);color:var(--amb2)} .feed-list .t{color:var(--mut)} .scan{ position:absolute;left:0;right:0;height:120px;top:-120px;pointer-events:none; background:linear-gradient(180deg,transparent,rgba(224,168,61,.07),transparent); animation:scan 6s linear infinite; } @keyframes scan{to{transform:translateY(140%)}} /* sections */ .section{max-width:var(--w);margin:0 auto;padding:clamp(64px,9vw,120px) 24px} .sec-head{max-width:52ch} .sec-head .num{color:var(--amb);display:block;margin-bottom:14px} .sec-head h2{font-size:clamp(25px,3vw,38px)} .sec-head p{color:var(--mut);margin-top:18px} /* cards */ .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px} .card{ background:linear-gradient(180deg,rgba(255,255,255,.035),transparent); border:1px solid var(--line);border-radius:var(--r);padding:26px; transition:border-color .25s,transform .25s var(--ease); } .card:hover{border-color:rgba(224,168,61,.4);transform:translateY(-3px)} .card h3{font-size:19px;margin-bottom:12px} .card p{color:var(--mut);font-size:15px} /* osint */ .split{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,80px);align-items:start} .checks{list-style:none;display:grid;gap:14px} .checks li{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:22px;border:1px solid var(--line);border-radius:var(--r);background:rgba(255,255,255,.02)} .checks li:nth-child(even){margin-left:clamp(0px,4vw,48px)} .checks .mono{color:var(--amb);padding-top:4px} .checks h3{font-size:17px;margin-bottom:8px} .checks p{color:var(--mut);font-size:15px} /* plans */ .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px;align-items:stretch} .plan{ display:flex;flex-direction:column;padding:30px; border:1px solid var(--line);border-radius:var(--r); background:linear-gradient(180deg,rgba(255,255,255,.035),transparent); } .plan-featured{border-color:rgba(224,168,61,.42);background:linear-gradient(180deg,rgba(224,168,61,.10),transparent 62%)} .plan h3{font-size:20px;color:var(--amb)} .plan .price{font-family:"Unbounded",sans-serif;font-weight:600;font-size:clamp(24px,2.4vw,30px);letter-spacing:-.02em;margin-top:18px} .plan .per{color:var(--mut);font-size:14px;margin-top:6px} .plan ul{list-style:none;display:grid;gap:12px;margin:26px 0 30px;font-size:15px;color:var(--mut)} .plan li{display:grid;grid-template-columns:auto 1fr;gap:10px;line-height:1.45} .plan li::before{content:"";width:6px;height:6px;margin-top:8px;border-radius:50%;background:var(--amb);opacity:.8} .plan .btn{margin-top:auto} .ftr{max-width:var(--w);margin:clamp(32px,5vw,64px) auto 0;padding:32px 24px 60px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center} /* reveal */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .reveal.on{opacity:1;transform:none} /* modal — centred in the viewport (the global margin reset kills the UA's margin:auto) */ dialog{ position:fixed;inset:0;margin:auto; width:min(460px,92vw);height:fit-content;max-height:90dvh;overflow-y:auto; border:1px solid var(--line);border-radius:18px;padding:28px; background:linear-gradient(180deg,var(--panel),var(--ink2));color:var(--tx); box-shadow:0 50px 100px -40px #000; } dialog::backdrop{background:rgba(5,6,9,.78);backdrop-filter:blur(4px)} .m-head{display:flex;justify-content:space-between;align-items:start;margin-bottom:22px} .m-head h2{font-size:22px} .x{background:none;border:0;color:var(--mut);font-size:26px;line-height:1;cursor:pointer;padding:0 4px} .x:hover{color:var(--tx)} form label{display:block;font-size:13.5px;color:var(--mut);margin:16px 0 7px} form input[type=text],form input[type=email]{ width:100%;padding:13px 14px;border-radius:10px;color:var(--tx); background:rgba(0,0,0,.35);border:1px solid var(--line); font:400 16px/1.2 "Golos Text",sans-serif;transition:border-color .2s; } form input:focus{border-color:var(--amb);outline:none} .consent{display:flex;gap:10px;align-items:start;margin:22px 0 6px;font-size:13px;color:var(--mut)} .consent input{accent-color:var(--amb);margin-top:2px;flex:none;width:16px;height:16px} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .msg{font-size:14px;min-height:20px;margin:12px 0 4px;color:var(--hot)} .msg.ok{color:#7fd6a8} .done{text-align:center;padding:14px 0} .done h2{font-size:22px;margin-bottom:14px} .done p{color:var(--mut);font-size:15px} [disabled]{opacity:.6;cursor:progress} @media(max-width:900px){ .hero,.split{grid-template-columns:1fr} .cards,.plans{grid-template-columns:1fr} .checks li:nth-child(even){margin-left:0} .nav{display:none} .lang{margin-left:auto} } @media(max-width:600px){ body{font-size:16px} .hdr{gap:10px;padding:12px 16px} .brand{font-size:12px;letter-spacing:.1em} .brand-mark{width:19px;height:19px} .lang-btn{width:34px;padding:6px 0;font-size:10px} .hdr .btn-sm{padding:9px 13px;font-size:13px} .lbl-full{display:none} .lbl-short[hidden]{display:inline} .hero,.section{padding-left:16px;padding-right:16px} .ftr{padding:28px 16px 48px} .feed{padding:14px} .card,.plan,.checks li{padding:22px} .checks li{gap:14px} .hero-cta{gap:10px} .hero-cta .btn{width:100%} dialog{padding:22px 18px} } @media(max-width:380px){ .hdr{gap:8px} .brand{font-size:11px;letter-spacing:.06em} .lang-btn{width:30px} } @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} .reveal{opacity:1;transform:none} }