/* Метаформа - one-page site */
:root{--red:#E8253A;--red-dk:#9E1222;--ink:#1A1A1F;--paper:#E8DECD;--hdr:52px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--hdr)}
body{margin:0;font-family:'Onest',system-ui,sans-serif;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--red)}a:hover{color:var(--red-dk)}
.serif{font-family:'Playfair Display',Georgia,serif;font-style:italic}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
.nl{color:var(--red);text-decoration:none}.nl:hover{color:var(--red-dk)}
.fl{color:#fff;text-decoration:none}.fl:hover{color:#fff;text-decoration:underline}
.oval{display:inline-block;font-size:15px;color:var(--red);border:1px solid var(--red);border-radius:50%;padding:5px 18px}

/* header */
.hdr{position:sticky;top:0;z-index:20;background:#fff;height:var(--hdr);padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.hdr-logo{display:flex}.hdr-logo img{height:26px;width:auto;display:block}
.hdr-nav{display:flex;gap:18px;font-size:15px;font-weight:500}
.hdr-mail{font-size:17px}
@media (max-width:700px){.hdr-mail{display:none}.hdr-nav{gap:14px;font-size:14px}}

/* intro */
.intro{padding:64px 20px 72px;display:flex;flex-wrap:wrap;gap:32px 56px;align-items:flex-start;color:var(--red)}
.intro p{flex:1 1 260px;max-width:320px;margin:0;font-size:15px;line-height:1.45}
.intro h1{flex:999 1 560px;min-width:0;margin:0;font-weight:500;font-size:clamp(2.6rem,6.6vw,6.4rem);line-height:.98;letter-spacing:-.035em}
.intro h1 .serif{font-weight:400;letter-spacing:-.02em}

/* monitor */
.mon{position:relative}
.mon-area{top:var(--hdr);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.mon-wrap{display:flex;flex-direction:column;align-items:center}
.mon-bezel{background:#E6E2DB}
.mon-screen{position:relative;overflow:hidden;background:var(--paper)}
.desk{position:absolute;left:0;top:0;width:1440px;transform-origin:0 0;background:var(--paper)}
.fill{position:absolute;inset:0;width:100%;height:100%}
.mon-stand{width:26%;height:46px;background:#D8D3CB;clip-path:polygon(18% 0,82% 0,100% 100%,0 100%)}
.icons{position:absolute;right:34px;top:34px;display:flex;flex-direction:column;gap:22px;align-items:center}
.icon{width:104px;display:flex;flex-direction:column;align-items:center;gap:7px;font-size:14px}
.icon-tile{width:64px;height:64px;border-radius:14px;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(10,40,90,.25)}
.icon-tile svg{width:34px;height:34px;fill:none;stroke:var(--red);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.win{position:absolute;left:48px;bottom:84px;width:620px;background:#fff;border-radius:10px;box-shadow:0 30px 70px -20px rgba(10,30,70,.55);overflow:hidden}
.win-bar{height:38px;background:#F3F3F5;display:flex;align-items:center;padding:0 14px;position:relative}
.dot{width:12px;height:12px;border-radius:50%;background:#D3D3D8;margin-right:8px}.dot.red{background:var(--red)}
.win-title{position:absolute;left:0;right:0;text-align:center;font-size:15px;font-weight:600;color:var(--red)}
.win-body{background:#E3F0FC;padding:22px 22px 26px;display:flex;flex-direction:column;align-items:center;gap:18px}
.win-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;width:100%}
.card{background:#fff;border-radius:6px;padding:14px 12px 12px;display:flex;flex-direction:column;gap:10px;min-height:196px}
.card-t{font-size:15px;color:var(--red);line-height:1.1;overflow-wrap:anywhere}
.card-d{font-size:11px;line-height:1.4;color:#A3172A}
.card-n{margin-top:auto;border-top:1.5px dashed #F1A9B2;padding-top:8px;font-family:'JetBrains Mono',monospace;font-size:10px;color:#A3172A}
.barcode{height:22px;display:block;background:repeating-linear-gradient(90deg,var(--red) 0 2px,transparent 2px 4px,var(--red) 4px 5px,transparent 5px 8px,var(--red) 8px 11px,transparent 11px 13px)}
.taskbar{position:absolute;right:26px;bottom:16px;display:flex;gap:16px;align-items:center;font-size:14px}

/* activities */
.act{position:relative;background:#fff}
.act-pin{top:var(--hdr);max-width:1280px;margin:0 auto;padding:24px 20px;display:flex;flex-direction:column;gap:22px}
.act-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;color:var(--red)}
.ab{flex:1 1 260px;display:flex;justify-content:space-between;max-width:360px;font-size:14px;font-weight:500}
.act-head p{flex:0 1 260px;margin:0;font-size:15px;line-height:1.35}
.oval-lg{margin:0;font-weight:500;font-size:22px;border:1.5px solid var(--red);border-radius:50%;padding:12px 26px}
.act-box{position:relative;min-height:0;display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
.col{flex:1 1 230px;min-width:0;min-height:320px;background:var(--red);color:#fff;position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:20px 18px 22px;overflow:hidden}
.col-n{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700}
.col-body{display:flex;flex-direction:column;gap:14px;position:relative;z-index:2}
.col h3{margin:0;font-size:clamp(1.5rem,2.1vw,1.9rem);font-weight:500;line-height:1.02;letter-spacing:-.01em}
.col p{margin:0;font-size:15px;line-height:1.4;color:#FFF1F2;max-width:32ch}
.ov{position:absolute;left:0;top:0;pointer-events:none;z-index:1;overflow:hidden;display:none}
.is-desk .ov{display:block}

/* focus poster */
.focus{position:relative;overflow:hidden;background:var(--paper);color:#151515}
.grain{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.focus-in{position:relative;max-width:1280px;margin:0 auto;padding:56px 20px 64px;min-height:860px;display:flex;flex-direction:column}
.focus-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;position:relative;z-index:2;font-size:13px;letter-spacing:.08em}
.focus-code{font-size:clamp(1.4rem,2.2vw,2rem);font-weight:500;letter-spacing:.02em}
.comp{position:absolute;right:-2%;top:50%;width:min(62vw,780px);height:auto;transform:translateY(-50%);z-index:1;overflow:visible}
@media (max-width:979px){.comp{right:-38vw;width:120vw}}
.focus-h{position:relative;z-index:2;margin:auto 0;padding:48px 0;font-weight:600;font-size:clamp(3rem,8vw,8.2rem);line-height:.92;letter-spacing:-.045em;max-width:9ch}
.focus-h .serif{font-weight:500;color:#B8231A}
.focus-bottom{position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:flex-end;gap:24px 64px}
.focus-bottom p{margin:0;font-size:17px;line-height:1.5;max-width:26rem}
.vert{writing-mode:vertical-rl;display:flex;align-items:center;gap:14px;font-size:14px;letter-spacing:.04em;min-height:260px}
.vline{width:1px;height:70px;background:#151515;display:block}
.vdot{width:14px;height:14px;border-radius:50%;background:#DE3420;display:block}

/* clients */
.clients{padding:96px 20px 112px;display:flex;flex-wrap:wrap;gap:40px 56px;align-items:stretch}
.clients-list{flex:1 1 440px;min-width:0;display:flex;flex-direction:column;gap:44px}
.clients-list h2{margin:0;color:var(--red);font-weight:500;font-size:clamp(2.8rem,6vw,5.6rem);line-height:.95;letter-spacing:-.035em}
.clients-list h2 .serif{font-weight:400}
#crows{display:flex;flex-direction:column}
.crow{background:transparent;border:0;border-bottom:1px solid #EFD2D6;font:inherit;cursor:pointer;text-align:left;width:100%;display:flex;align-items:baseline;gap:16px;padding:16px 0;min-height:56px;color:var(--red);opacity:.38;transition:opacity .2s}
.crow .mono{font-size:13px;width:36px}
.crow-n{font-size:clamp(1.5rem,2.4vw,2.1rem);flex:1}
.arr{font-size:20px;opacity:0;transition:opacity .2s}
.crow.on{opacity:1}.crow.on .arr{opacity:1}
.crow:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.clients-panel{flex:1 1 420px;min-width:0;min-height:420px;background:#fff;border:1px solid #EFD2D6;display:flex;flex-direction:column;justify-content:space-between;padding:28px}
.small{font-size:12px;letter-spacing:.08em;color:#8A2230}
.clients-logo{display:flex;align-items:center;justify-content:center;flex:1;padding:24px 0}
.clients-logo img{max-width:88%;max-height:220px;height:auto;object-fit:contain;display:block}

/* contact */
.contact{padding:96px 0 120px;color:var(--red)}
.contact-head{padding:0 20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:22px}
.contact-head h2{margin:0;font-weight:500;font-size:clamp(2.2rem,4.8vw,4.4rem);line-height:1;letter-spacing:-.03em}
.contact-head h2 .serif{font-weight:400}
.contact-head p{margin:0;font-size:16px;line-height:1.45;max-width:24rem}
.dia-track{position:relative;height:190px;margin-top:56px}
.dia-line{position:absolute;left:0;right:0;top:50%;border-top:1.5px dashed #F1A9B2}
.diamond{position:absolute;top:50%;left:calc(32% + 20px);width:128px;height:128px;margin-top:-64px;background:var(--red);transform:rotate(45deg);display:flex;align-items:center;justify-content:center;text-decoration:none}
.diamond:hover{background:var(--red-dk)}
.diamond span{transform:rotate(-45deg);color:#fff;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.06em;white-space:nowrap}
.contact-info{font-style:normal;padding:24px 20px 0;display:flex;flex-wrap:wrap;justify-content:center;gap:16px 48px;font-family:'JetBrains Mono',monospace;font-size:14px}
.contact-info a{color:inherit}

/* footer */
.foot{background:var(--red);color:#fff;overflow:hidden}
.foot-grid{padding:36px 20px 8px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;font-size:14px;line-height:1.6}
.foot-grid>div{display:flex;flex-direction:column}
.lbl{font-size:11px;letter-spacing:.08em;opacity:.8}
.bigword{font-family:'Oswald','Onest',sans-serif;font-weight:700;font-size:17.2vw;line-height:.9;letter-spacing:-.01em;white-space:nowrap;padding:2vw 1vw 0;text-transform:uppercase}
.bigo{height:.72em;width:.6em;vertical-align:0;margin:0 .015em}
@keyframes mfspin{to{transform:rotate(360deg)}}
.spin{transform-box:fill-box;transform-origin:center;animation:mfspin 14s linear infinite}
.cut{position:relative;height:64px;margin-top:12px}
.cut-a{position:absolute;left:0;width:76%;top:32px;border-top:1.5px solid #fff}
.cut-b{position:absolute;left:76%;right:0;top:32px;border-top:1.5px dashed #fff}
.cut-dots{position:absolute;left:20px;top:8px;font-size:12px;letter-spacing:2px}
.sciss{position:absolute;top:17px;left:76%;margin-left:-15px;background:var(--red)}
.cut-lbl{position:absolute;right:20px;top:8px;font-size:11px;letter-spacing:.08em}
.foot-bottom{padding:20px 20px 28px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;font-size:11px;letter-spacing:.08em}
.dots5{letter-spacing:6px}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.spin{animation:none}}