:root { --ink:#121212; --paper:#f7f5ef; --muted:#66645e; --blue:#7b87ff; --lime:#d9ff67; --violet:#c7a8ff; --orange:#ff9e70; --line:#d9d6ce; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Manrope,Arial,sans-serif; font-size:16px; line-height:1.55; }
a { color:inherit; text-decoration:none; }
.site-header { height:84px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:0 clamp(24px,5vw,82px); border-bottom:1px solid rgba(18,18,18,.12); }
.brand { display:flex; gap:10px; align-items:center; font-family:Unbounded,sans-serif; font-size:17px; font-weight:600; letter-spacing:-.8px; white-space:nowrap; }
.brand-mark { display:grid; width:38px; height:38px; place-items:center; background:url("assets/it-ai-mark.svg") center / contain no-repeat; color:transparent; border-radius:0; font-family:Manrope,sans-serif; font-size:0; letter-spacing:0; transform:none; }
.brand-mark::after { content:none; }
.dot { color:#7381fa; }
.main-nav { display:flex; gap:30px; font-size:13px; font-weight:700; }
.main-nav a, .text-link { transition:opacity .2s; }
.main-nav a:hover, .text-link:hover { opacity:.56; }
.header-cta { font-size:13px; font-weight:800; border-bottom:1px solid var(--ink); padding-bottom:2px; }
.header-cta span { margin-left:8px; }
.hero { position:relative; overflow:hidden; min-height:565px; padding:clamp(65px,9vw,128px) clamp(24px,11vw,180px) 86px; background:#a8b2ff; isolation:isolate; }
.hero::before { content:""; position:absolute; z-index:-1; width:590px; aspect-ratio:1; right:-154px; top:-300px; border-radius:50%; border:1px solid rgba(18,18,18,.26); box-shadow:0 0 0 58px rgba(255,255,255,.07),0 0 0 116px rgba(18,18,18,.06),0 0 0 174px rgba(255,255,255,.06); }
.eyebrow, .kicker { font-size:11px; font-weight:800; letter-spacing:1.5px; }
.eyebrow { display:flex; align-items:center; gap:9px; margin-bottom:24px; }
.eyebrow span { width:7px; height:7px; background:var(--ink); border-radius:50%; }
h1,h2,h3 { margin:0; font-family:Unbounded,sans-serif; font-weight:600; line-height:1.1; letter-spacing:-2.7px; }
.hero h1 { font-size:clamp(38px,7vw,96px); max-width:980px; }
.hero h1 em { white-space:nowrap; }
em { font-style:normal; color:#f7f5ef; text-shadow:1px 1px 0 rgba(18,18,18,.18); }
.hero-copy { max-width:465px; margin:28px 0 30px; font-size:16px; font-weight:600; }
.hero-actions { display:flex; align-items:center; gap:26px; }
.button { display:inline-flex; justify-content:center; align-items:center; gap:19px; padding:15px 20px; font-size:13px; font-weight:800; border:1px solid var(--ink); transition:transform .2s, background .2s; }
.button:hover { transform:translateY(-3px); }
.button-dark { background:var(--ink); color:#fff; }
.text-link { font-size:13px; font-weight:800; border-bottom:1px solid currentColor; padding-bottom:2px; }
.text-link span, .article-link span { margin-left:8px; }
.hero-orbit { position:absolute; border:1px solid rgba(18,18,18,.27); border-radius:50%; z-index:-1; }
.orbit-one { width:380px; height:380px; right:11%; bottom:-250px; }
.orbit-two { width:550px; height:550px; right:2%; bottom:-382px; }
.hero-spark { position:absolute; color:#f7f5ef; font-size:30px; }
.spark-one { right:29%; top:28%; } .spark-two { right:13%; bottom:26%; font-size:18px; }
.hero-ai-card { position:absolute; right:clamp(40px,12vw,210px); top:43%; width:141px; height:112px; padding:17px; background:#f7f5ef; box-shadow:11px 11px 0 rgba(18,18,18,.13); transform:rotate(8deg); }
.hero-ai-card span:not(.pulse) { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:1px; } .hero-ai-card strong { display:block; margin-top:10px; font:600 24px Unbounded,sans-serif; letter-spacing:-1px; }
.pulse { display:inline-block; width:7px; height:7px; margin-right:5px; background:#78bb52; border-radius:50%; }
.ticker { display:flex; overflow:hidden; padding:14px 0; background:var(--ink); color:var(--lime); font:600 16px Unbounded,sans-serif; white-space:nowrap; letter-spacing:-.7px; }
.ticker-track { display:flex; flex:none; width:max-content; animation:ticker-slide 52s linear infinite; will-change:transform; }
.ticker-track span { display:block; flex:none; padding-right:28px; } .ticker i { margin:0 14px; color:#fff; font-style:normal; }
@keyframes ticker-slide { to { transform:translateX(-50%); } }
.content-section { padding:98px clamp(24px,11vw,180px); }
.section-heading { margin-bottom:34px; } .section-heading h2 { margin-top:10px; font-size:clamp(29px,3.4vw,46px); }
.kicker { margin:0; color:#52504b; }
.feature-card { display:grid; grid-template-columns:1.08fr .92fr; min-height:380px; background:#e8e7f8; transition:transform .28s ease, box-shadow .28s ease; }
.feature-card:hover { box-shadow:12px 14px 0 rgba(18,18,18,.12); transform:translate(-3px,-5px); }
.feature-visual { position:relative; overflow:hidden; min-height:350px; display:grid; place-items:center; background:#b7bfff; }
.feature-visual::before { content:""; position:absolute; width:440px; height:440px; border:1px solid rgba(18,18,18,.28); border-radius:50%; box-shadow:0 0 0 35px rgba(255,255,255,.12), 0 0 0 70px rgba(18,18,18,.06); }
.chat-window { z-index:1; width:260px; padding:10px 14px 14px; background:#fbfaf5; box-shadow:12px 13px 0 rgba(18,18,18,.12); transform:rotate(-4deg); }
.window-top { display:flex; align-items:center; gap:5px; padding-bottom:10px; border-bottom:1px solid #e5e2db; } .window-top i { width:6px; height:6px; border-radius:50%; background:#fd957e; } .window-top i:nth-child(2) { background:#ffd476; } .window-top i:nth-child(3) { background:#75bf76; } .window-top span { margin-left:auto; font-size:7px; color:#777; }
.bubble { max-width:190px; margin-top:12px; padding:8px 10px; border-radius:9px; font-size:9px; font-weight:700; } .bubble-user { margin-left:auto; background:#dfedff; } .bubble-ai { background:#eeeaff; } .bubble-ai b { color:#7767e5; } .typing { display:flex; gap:3px; padding:9px 0 0 9px; } .typing span { width:4px; height:4px; background:#736cd7; border-radius:50%; }
.feature-content { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:45px clamp(30px,5vw,74px); }
.article-meta { display:flex; align-items:center; gap:10px; margin:0 0 16px; color:#67645e; font-size:11px; font-weight:800; }
.tag { display:inline-block; padding:4px 7px; color:var(--ink); border-radius:2px; font-size:9px; letter-spacing:.7px; }.tag-blue{background:#a9b4ff}.tag-violet{background:#d6c2ff}.tag-green{background:#d9ff67}.tag-orange{background:#ffc0a2}
.feature-content h3 { max-width:410px; font-size:clamp(25px,3vw,39px); }.feature-content > p:not(.article-meta) { max-width:390px; margin:17px 0 25px; color:#53514c; font-size:14px; font-weight:600; }.article-link { margin-top:auto; border-bottom:1px solid; font-size:13px; font-weight:800; }
.card-title-link { display:block; transition:color .2s ease; }.card-title-link:hover, .card-title-link:focus-visible { color:#5d59c7; }.card-title-link:focus-visible { outline:2px solid currentColor; outline-offset:4px; }
.row-heading { display:flex; justify-content:space-between; align-items:end; }
.article-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }.small-card { display:flex; flex-direction:column; min-height:415px; padding-bottom:22px; transition:transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease; }.small-card:hover { box-shadow:8px 10px 0 rgba(18,18,18,.1); transform:translate(-3px,-7px); }.card-art { position:relative; height:190px; overflow:hidden; margin-bottom:20px; transition:filter .28s ease; }.card-art::after { content:""; position:absolute; inset:-100% -35%; pointer-events:none; background:linear-gradient(110deg,transparent 42%,rgba(255,255,255,.32) 50%,transparent 58%); transform:translateX(-65%) rotate(7deg); transition:transform .65s ease; }.small-card:hover .card-art::after { transform:translateX(65%) rotate(7deg); }.small-card:hover .card-art { filter:saturate(1.12); }.purple-card .card-art{background:#d8c3ff}.lime-card .card-art{background:#d9ff67}.orange-card .card-art{background:#ffb28c}.small-card h3 { flex:1; padding-right:15px; font-size:20px; letter-spacing:-1.4px; }.small-card > a { display:inline-flex; width:max-content; margin-top:18px; border-bottom:1px solid; font-size:12px; font-weight:800; transition:gap .2s ease; }.small-card:hover > a { gap:5px; }
.more-heading { display:flex; align-items:end; gap:19px; margin:58px 0 24px; padding-top:35px; border-top:1px solid var(--line); }.more-heading h3 { font-size:21px; letter-spacing:-1.2px; }
.art-prompt span { position:absolute; top:31px; left:23px; font:600 31px Unbounded,sans-serif; letter-spacing:-2px; }.art-prompt b{position:absolute; left:45%; top:82px; font-size:70px; font-weight:400; color:#fff}.art-prompt i{position:absolute; right:20px; bottom:21px; font:600 18px Unbounded,sans-serif; font-style:normal; transform:rotate(-12deg)}
.art-code span{position:absolute; top:26px; left:23px; font:600 61px Unbounded,sans-serif; letter-spacing:-8px}.art-code i{position:absolute; right:24px; bottom:23px; font:600 19px Unbounded,sans-serif; font-style:normal; line-height:1.1}.art-code b{position:absolute; right:25px; top:25px; font:500 13px Unbounded,sans-serif}.art-flow span{position:absolute; top:30px; left:23px; font:600 41px Unbounded,sans-serif; letter-spacing:-3px}.art-flow i{position:absolute; top:19px; right:22px; font-size:55px; font-style:normal}.art-flow b{position:absolute; bottom:23px; left:25px; font:600 16px Unbounded,sans-serif; line-height:1.05}
.blue-card .card-art{background:#a9b4ff}.mint-card .card-art{background:#b7f0d3}.pink-card .card-art{background:#f4b1ce}.art-agents span{position:absolute;top:27px;left:22px;font:600 33px Unbounded,sans-serif;letter-spacing:-3px}.art-agents i{position:absolute;right:24px;top:23px;font:600 14px Unbounded,sans-serif;font-style:normal}.art-agents b{position:absolute;bottom:24px;right:25px;font:600 19px/1 Unbounded,sans-serif}.art-local span{position:absolute;top:25px;left:22px;font:600 35px Unbounded,sans-serif;letter-spacing:-3px}.art-local i{position:absolute;right:22px;bottom:25px;font:600 37px Unbounded,sans-serif;font-style:normal}.art-local b{position:absolute;right:32px;top:20px;font-size:36px}.art-search span{position:absolute;top:27px;left:22px;font:600 27px Unbounded,sans-serif;letter-spacing:-2px}.art-search i{position:absolute;right:26px;top:17px;font:600 61px Unbounded,sans-serif;font-style:normal}.art-search b{position:absolute;bottom:23px;left:24px;font:600 16px/1 Unbounded,sans-serif}
.guide-strip { display:grid; grid-template-columns:70px 1.2fr 1fr 54px; gap:36px; align-items:center; padding:55px clamp(24px,11vw,180px); background:var(--lime); }.guide-number{font:600 18px Unbounded,sans-serif}.guide-strip h2{margin-top:9px;font-size:clamp(23px,2.6vw,34px)}.guide-strip>p{max-width:310px;font-size:13px;font-weight:600}.round-button{display:grid;width:51px;height:51px;place-items:center;border:1px solid;border-radius:50%;font-size:22px;transition:transform .2s}.round-button:hover{transform:rotate(45deg)}
.about-section { padding-top:116px; padding-bottom:116px; }.about-copy{display:flex;justify-content:space-between;gap:50px;margin-top:25px}.about-copy h2{font-size:clamp(34px,5vw,67px)}.about-copy h2 em{color:#8d77bd;text-shadow:none}.about-copy p{max-width:290px;margin:0;padding-top:10px;font-size:15px;font-weight:600;color:#5f5c55}
.subscribe { display:flex; justify-content:space-between; gap:50px; padding:66px clamp(24px,11vw,180px); background:var(--ink); color:#fff; }.subscribe .kicker{color:#b9b7ae}.subscribe h2{margin-top:10px;font-size:clamp(30px,4vw,51px)}.subscribe-form{width:min(430px,100%);padding-top:9px}.subscribe-form label{display:block;margin-bottom:8px;font-size:11px;font-weight:700;color:#c9c7c0}.subscribe-form>div{display:flex;border-bottom:1px solid #bcbab3}.subscribe-form input{flex:1;min-width:0;padding:12px 2px;border:0;background:transparent;color:#fff;font:500 14px Manrope,sans-serif;outline:0}.subscribe-form input::placeholder{color:#8c8981}.subscribe-form button{border:0;background:transparent;color:var(--lime);font:800 12px Manrope,sans-serif;cursor:pointer}.subscribe-form small{display:block;margin-top:13px;color:#96938c;font-size:10px}.form-message{margin:10px 0 0;color:var(--lime);font-size:11px;font-weight:700}
.site-footer { display:flex; justify-content:space-between; align-items:center; gap:25px; padding:32px clamp(24px,5vw,82px); background:var(--ink); border-top:1px solid #4b4a46; color:#fff; }.site-footer p{margin:0;color:#aaa8a1;font-size:11px;font-weight:600}
/* Article */
.article-shell{max-width:1060px;margin:0 auto;padding:44px 24px 110px}.back-link{display:inline-block;margin-bottom:56px;border-bottom:1px solid;font-size:12px;font-weight:800}.article-header{max-width:800px}.article-header h1{font-size:clamp(39px,6vw,78px)}.article-header .lead{max-width:595px;margin:26px 0 41px;font-size:18px;font-weight:600;color:#5c5953}.article-hero-art{position:relative;display:flex;align-items:end;justify-content:space-between;height:300px;padding:30px;overflow:hidden;background:#a9b4ff}.article-hero-art::before{content:"";position:absolute;width:390px;height:390px;left:50%;top:50%;border:1px solid rgba(18,18,18,.3);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 45px rgba(255,255,255,.1),0 0 0 90px rgba(18,18,18,.06)}.hero-chat-logo{z-index:1;display:grid;width:100px;height:100px;place-items:center;border-radius:50%;background:var(--ink);color:#fff;font-size:40px;box-shadow:11px 11px 0 rgba(18,18,18,.12)}.article-hero-art span,.article-hero-art i{z-index:1;font:600 31px/1 Unbounded,sans-serif;font-style:normal;letter-spacing:-2px}.article-hero-art i{font-size:15px}.hero-line{position:absolute;width:106%;height:1px;left:-3%;bottom:60px;background:rgba(18,18,18,.25);transform:rotate(-7deg)}.article-layout{display:grid;grid-template-columns:170px minmax(0,650px);gap:64px;margin-top:66px}.toc{position:sticky;top:20px;align-self:start}.toc p{margin:0 0 15px;font-size:9px;font-weight:800;letter-spacing:1px;color:#6a6761}.toc a{display:block;margin:0 0 11px;color:#6a6761;font-size:11px;font-weight:700}.toc a:hover{color:var(--ink)}.article-body{font-size:16px;color:#2a2926}.article-body .intro{margin-top:0;font-size:20px;line-height:1.6;font-weight:600;color:var(--ink)}.article-body h2{margin:48px 0 17px;font-size:28px;letter-spacing:-1.6px}.article-body p{margin:0 0 18px}.article-body a{color:#4d5ac8;border-bottom:1px solid}.note{margin:27px 0;padding:20px 23px;background:#e9e7ff;border-left:3px solid #7b87ff}.note b{font-size:12px}.note p{margin:6px 0 0;font-size:13px;line-height:1.6}.steps{margin:27px 0;background:#ededa6;padding:5px 22px}.steps>div{display:flex;gap:15px;padding:18px 0;border-bottom:1px solid rgba(18,18,18,.14)}.steps>div:last-child{border:0}.steps span{display:grid;flex:0 0 24px;height:24px;place-items:center;border:1px solid;border-radius:50%;font-size:10px;font-weight:800}.steps p{margin:0;font-size:13px}.article-body ul{padding-left:21px}.article-body li{margin-bottom:9px}.closing{margin-top:34px!important;padding-top:24px;border-top:1px solid var(--line);font-weight:700}.article-cta{display:flex;flex-direction:column;align-items:center;padding:92px 24px;background:#c9aaff;text-align:center}.article-cta h2{margin:12px 0 28px;font-size:clamp(32px,4vw,52px)}.button-light{background:#fff}
@media (max-width:760px){.site-header{height:67px;padding:0 19px}.main-nav{display:none}.header-cta{font-size:11px}.brand{font-size:14px}.brand-mark{width:30px;height:30px;font-size:0}.hero{min-height:580px;padding:72px 25px}.hero-ai-card{right:50px;top:auto;bottom:42px}.hero-copy{font-size:14px;max-width:380px}.hero-orbit{right:-160px}.spark-one{right:16%;top:28%}.content-section{padding:65px 24px}.feature-card{grid-template-columns:1fr}.feature-visual{min-height:260px}.feature-content{min-height:300px;padding:32px}.article-grid{grid-template-columns:1fr;gap:25px}.small-card{min-height:0}.card-art{height:180px}.row-heading{align-items:start;gap:12px}.row-heading .text-link{padding-top:18px;white-space:nowrap;font-size:11px}.guide-strip{grid-template-columns:42px 1fr 45px;gap:18px;padding:36px 24px}.guide-strip>p{display:none}.guide-number{font-size:13px}.round-button{width:43px;height:43px}.about-copy{display:block}.about-copy p{margin-top:25px}.subscribe{display:block;padding:52px 24px}.subscribe-form{margin-top:30px}.article-shell{padding:32px 24px 70px}.back-link{margin-bottom:43px}.article-header .lead{font-size:16px}.article-hero-art{height:220px}.article-hero-art span{font-size:21px}.hero-chat-logo{width:75px;height:75px;font-size:30px}.article-layout{display:block;margin-top:43px}.toc{display:none}.article-body .intro{font-size:18px}.article-body h2{font-size:25px}.article-cta{padding:65px 24px}}

/* В заголовках статей акцент всегда читаем на светлом фоне. */
.article-header h1 em { color:#6651a8; text-shadow:none; }
.article-art-violet { background:#d8c3ff; }
.article-art-lime { background:#d9ff67; }
.article-art-orange { background:#ffb28c; }
@media (prefers-reduced-motion:reduce){.feature-card,.small-card,.card-art,.card-art::after,.small-card>a,.card-title-link{transition:none!important}.feature-card:hover,.small-card:hover{transform:none}}