/* Layout retained from the original personal page. Semantic values are copied
   from Finolog Webest design/payroll-browser/src/tokens.css. */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-bottom:24px}
body{margin:0;background:linear-gradient(145deg,#061b30 0%,#151327 52%,#080e1b 100%);background-attachment:fixed;min-height:100dvh;color:var(--color-text);font:var(--font-base)/1.5 var(--font-ui);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
a:focus-visible{outline:2px solid var(--color-focus);outline-offset:4px}
::selection{background:var(--color-accent-soft);color:var(--color-accent)}
.profile{width:min(640px,calc(100% - 48px));margin:0 auto;padding:64px 0 64px}
.profile-header{text-align:center}
.avatar{display:block;width:160px;height:160px;object-fit:cover;border-radius:50%;margin:0 auto var(--space-6);box-shadow:0 0 0 6px var(--color-surface);border:1px solid var(--color-border)}
h1{font-size:var(--font-title);line-height:1.2;letter-spacing:-.025em;font-weight:650;margin:0 0 var(--space-2)}
h1>span{color:var(--color-accent)}
.subtitle{font-size:var(--font-base);color:var(--color-muted);margin:0}
.messengers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3);border-top:1px solid var(--color-border);padding-top:var(--space-6);margin:var(--space-8) 0}
.messenger{min-height:80px;border:1px solid var(--color-border);border-radius:var(--radius-control);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);background:var(--color-surface);color:var(--color-text);transition:background var(--motion-fast),border-color var(--motion-fast),color var(--motion-fast)}
.messenger:hover{background:var(--color-surface-subtle);border-color:var(--color-border-strong)}
.messenger:active{transform:translateY(1px)}
.messenger span:last-child{font-size:var(--font-xs);font-weight:500}
.telegram{background:var(--color-surface);color:var(--color-text);border-color:var(--color-border)}
.telegram:hover{background:var(--color-surface-subtle);border-color:var(--color-border-strong)}
.bio{font-size:var(--font-md);line-height:1.75;letter-spacing:0}
.bio p{margin:0 0 var(--space-6)}

.bio b{font-weight:600}
.bio p:last-child{margin-bottom:0}
.inline-contact{display:inline;white-space:nowrap;color:var(--color-accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;transition:color var(--motion-fast)}
.inline-contact:hover{color:var(--color-accent-hover)}
.blog{margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--color-border)}
h2{font-size:var(--font-lg);font-weight:600;line-height:1.45;letter-spacing:-.015em;text-align:center;margin:0 0 var(--space-5)}
.blog-links{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.blog-links a{display:flex;justify-content:center;align-items:center;min-height:56px;border:1px solid var(--color-border);border-radius:var(--radius-control);padding:var(--space-3) var(--space-4);background:var(--color-surface);font-size:var(--font-sm);font-weight:500;transition:border-color var(--motion-fast),background var(--motion-fast)}
.blog-links a:hover{background:var(--color-surface-subtle);border-color:var(--color-border-strong)}







.arrow{font-size:16px;margin-left:var(--space-1);color:var(--color-muted)}
.skip{position:absolute;top:-100px;left:var(--space-4);padding:var(--space-3);background:var(--color-surface);color:var(--color-text);z-index:20}
.skip:focus{top:var(--space-2)}
@media(max-width:600px){.profile{width:calc(100% - 40px);padding-top:var(--space-10);padding-bottom:48px}.avatar{width:144px;height:144px}h1{font-size:28px}.subtitle{font-size:var(--font-sm)}.messengers{margin:var(--space-6) 0;gap:var(--space-2)}.messenger{min-height:80px}.bio{font-size:15px;line-height:1.7}.blog{margin-top:var(--space-8)}.blog-links{gap:var(--space-2)}.arrow{margin-left:var(--space-1)}}
@media(max-width:350px){h1{font-size:25px}}

/* Original brand glyphs from the old Taplink page, hosted locally. */
@font-face{font-family:TaplinkIcons;src:url('/assets/taplink-icons.woff2') format('woff2');font-weight:400;font-style:normal;font-display:block}
.social-icon{display:inline-block;flex-shrink:0;width:30px;height:30px;font-family:TaplinkIcons!important;font-size:30px;font-style:normal;font-weight:400!important;font-variant:normal;line-height:1;text-align:center;text-transform:none;letter-spacing:0;-webkit-font-smoothing:antialiased}
.icon-wh:before{content:"\e001"}.icon-tg:before{content:"\e007"}.icon-vk:before{content:"\e008"}.icon-ig:before{content:"\e00c"}
.icon-vk{font-size:35px;width:35px}
.blog-label{display:inline-flex;align-items:center;gap:var(--space-3)}
.blog-label .social-icon{font-size:24px;width:24px;height:24px;color:var(--color-accent)}
@media(max-width:360px){.blog-links{grid-template-columns:repeat(2,minmax(0,1fr))}.blog-links a{padding-inline:12px;font-size:12px}.blog-label{gap:8px}.blog-label .social-icon{font-size:20px;width:20px;height:20px}}

/* Compact, optically aligned original messenger glyphs. */
.messenger{min-height:72px;gap:8px}
.messenger .social-icon{display:grid;place-items:center;width:28px;height:28px;font-size:24px;line-height:1}
.messenger .icon-tg{font-size:23px}
.messenger .icon-vk{font-size:27px}
.messenger .icon-tg:before{transform:translateX(-1px)}
.company-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--color-accent);font-size:var(--font-sm);text-decoration:none;transition:color var(--motion-fast)}
.company-link:hover{color:var(--color-accent-hover);text-decoration:underline;text-underline-offset:4px}
.profile-link{color:var(--color-accent);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.profile-link:hover{color:var(--color-accent-hover)}

/* Brand colors are limited to original social glyphs. */
.social-icon.icon-wh{color:#25d366}
.social-icon.icon-tg{color:#26a5e4}
.social-icon.icon-vk{color:#0077ff}
.social-icon.icon-ig{color:#e1306c}
.social-icon.icon-ig:before{background:linear-gradient(35deg,#feda75 0%,#fa7e1e 22%,#d62976 48%,#962fbf 75%,#4f5bd5 100%);background-clip:text;-webkit-background-clip:text;color:transparent}

/* Equal icon boxes and centered labels keep both blog buttons aligned. */
.blog-label{justify-content:center;gap:10px;line-height:24px}
.blog-label .social-icon{display:grid;place-items:center;width:24px;height:24px;font-size:24px;line-height:1}
.blog-label .social-icon:before{display:block;line-height:1}
.blog-label .icon-tg{font-size:23px}
.blog-label .icon-tg:before{transform:translateX(-1px)}