/* kuguk.net — стиль снят с sent.marketing/pricing (основа) и firstpen.de
   (тёмная полоса с крупными цифрами). Снято 30.09.2026 из вычисленных стилей:
   белый фон, #111 текст, #737373 вторичный, #e5e5e5 линии, Inter 500 в теле,
   заголовки 600 с плотным трекингом, карточки 18px, кнопки 13px, акцент
   #2563EB только там, где нужно выделить одно главное. */

@font-face{font-family:'Inter';src:url(/fonts/Inter-latin.woff2) format('woff2');
  font-weight:100 900;font-display:swap}

:root{
  --bg:#fff; --fg:#111; --mut:#737373; --line:#e5e5e5; --soft:#f5f5f5;
  --pri:#171717; --acc:#2563eb; --acc-soft:#e8eef8; --acc-ink:#3b6fd9;
  --dark:#0a0a0a; --dark-mut:#a3a3a3; --dark-line:#262626;
  --r-card:18px; --r-btn:13px;
  --f:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--f);font-weight:500;
  font-size:16px;line-height:1.55;letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

.w{max-width:1120px;margin:0 auto;padding:0 32px}
.w.n{max-width:760px}
@media (max-width:640px){.w{padding:0 16px}}

a{color:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:6px}
p{margin:0 0 16px}
p:last-child{margin-bottom:0}

/* ---------- шапка ---------- */
.bar{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line)}
.bar .w{display:flex;align-items:center;gap:28px;height:64px}
.bar .id{font-weight:600;font-size:16px;letter-spacing:-.02em;text-decoration:none;
  display:flex;align-items:center;gap:10px}
.bar .id i{width:26px;height:26px;border-radius:7px;background:var(--pri);color:#fff;
  font:600 12px/26px var(--f);font-style:normal;text-align:center;letter-spacing:0}
.bar nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.bar nav a{font-size:14.5px;color:#404040;text-decoration:none}
.bar nav a:hover{color:var(--fg)}
@media (max-width:760px){.bar nav a:not(.btn){display:none}}

/* ---------- кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:40px;padding:0 18px;border-radius:var(--r-btn);font-size:14.5px;
  font-weight:500;text-decoration:none;white-space:nowrap;
  transition:background .15s,box-shadow .15s}
.btn.dk{background:var(--pri);color:#fafafa;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 1px 2px rgba(0,0,0,.1)}
.btn.dk:hover{background:#2a2a2a}
.btn.lt{background:#fff;color:var(--fg);border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(0,0,0,.05)}
.btn.lt:hover{background:var(--soft)}
.btn.lg{height:46px;padding:0 24px;font-size:15px}
.bar .btn{height:36px;padding:0 16px;font-size:14px}

/* ---------- метки ---------- */
.pill{display:inline-block;background:var(--acc-soft);color:var(--acc-ink);
  border-radius:6px;padding:3px 9px;font-size:14px;font-weight:500}
.ov{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mut);margin:0 0 14px}

/* ---------- типографика секций ---------- */
h1{font-weight:600;font-size:clamp(40px,4vw + 1.25rem,76px);line-height:1.02;
  letter-spacing:-.035em;margin:0}
h2{font-weight:600;font-size:clamp(28px,2.5vw + 1.1rem,48px);line-height:1.06;
  letter-spacing:-.03em;margin:0}
h3{font-weight:600;font-size:18px;line-height:1.3;letter-spacing:-.015em;margin:0}
.sec{padding:104px 0}
@media (max-width:640px){.sec{padding:68px 0}}
.sh{text-align:center;max-width:720px;margin:0 auto 52px}
.sh p{color:var(--mut);font-size:18px;line-height:1.55;margin-top:18px}
.sh .pill{margin-bottom:18px}

/* ---------- первый экран ---------- */
.hero{padding:96px 0 88px;text-align:center}
@media (max-width:640px){.hero{padding:56px 0 56px}}
.hero .pill{margin-bottom:22px}
.hero .role{font-family:var(--mono);font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mut);margin:22px 0 0}
.hero .lede{font-size:20px;line-height:1.5;color:#525252;max-width:48ch;text-wrap:balance;
  margin:22px auto 0;letter-spacing:-.01em}
.hero .now{font-size:15px;color:var(--mut);margin:12px auto 0}
.acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:34px}

/* ---------- тёмная полоса цифр (firstpen) ---------- */
.band{background:var(--dark);color:#fff;padding:80px 0}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.facts b{display:block;font-size:clamp(36px,3vw + 1rem,56px);font-weight:600;
  letter-spacing:-.04em;line-height:1;text-shadow:0 0 28px rgba(255,255,255,.22)}
.facts span{display:block;font-size:14.5px;color:var(--dark-mut);margin-top:14px;
  line-height:1.45;max-width:24ch}
.band .note{border-top:1px solid var(--dark-line);margin-top:48px;padding-top:20px;
  font-size:13px;color:#737373}
@media (max-width:860px){.facts{grid-template-columns:repeat(2,1fr);gap:36px 24px}}

/* ---------- о себе ---------- */
.prose p{font-size:18px;line-height:1.65;color:#404040}
.prose p:first-of-type{font-size:20px;color:var(--fg)}

/* ---------- сильные стороны: карточки как тарифы ---------- */
.caps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.caps article{background:#fff;border:1px solid rgba(229,229,229,.9);
  border-radius:var(--r-card);padding:24px;display:flex;flex-direction:column;gap:14px}
.caps article::before{content:"";width:22px;height:22px;border-radius:50%;
  background:var(--acc-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat}
.caps p{font-size:15.5px;line-height:1.5;margin:0}
@media (max-width:960px){.caps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.caps{grid-template-columns:1fr}}

/* ---------- карьера: строки как таблица сравнения ---------- */
.case-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.case-card{border:1px solid var(--line);border-radius:var(--r-card);padding:32px;
  display:flex;flex-direction:column;align-items:flex-start}
.case-card h3{font-size:23px;line-height:1.25}
.case-card dl{margin:24px 0 0}
.case-card dt{font-size:13px;font-weight:600;color:var(--mut);margin:22px 0 6px}
.case-card dt:first-child{margin-top:0}
.case-card dd{margin:0;color:#404040;font-size:16px;line-height:1.6}
.case-card dd.case-outcome{color:var(--fg);font-size:20px;font-weight:600;line-height:1.4}
.case-card .jump{margin-top:auto;padding-top:24px}
@media(max-width:760px){.case-grid{grid-template-columns:1fr}.case-card{padding:24px}}

.sec.alt{background:#fafafa;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tl{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.job{display:grid;grid-template-columns:190px 1fr;gap:32px;padding:28px 32px;
  border-top:1px solid var(--line)}
.job:first-child{border-top:0}
@media (max-width:760px){.job{grid-template-columns:1fr;gap:8px;padding:22px 20px}}
.job .when{font-family:var(--mono);font-size:12.5px;color:var(--mut);
  letter-spacing:.02em;padding-top:4px}
.job h3{font-size:19px}
.job .org{font-size:14.5px;color:var(--mut);margin:4px 0 12px}
.job p{font-size:15.5px;color:#404040;margin:0;max-width:68ch}
.job ul{list-style:none;margin:14px 0 0;padding:0;max-width:68ch}
.job li{position:relative;padding-left:26px;font-size:14.5px;color:var(--mut);margin:0 0 8px}
.job li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/16px no-repeat}
.job .buy{display:inline-block;background:var(--acc);color:#fff;border-radius:999px;
  font-size:10.5px;font-weight:600;letter-spacing:.02em;padding:2px 9px;
  margin-left:10px;vertical-align:3px}
.org a{color:var(--fg);text-decoration:none;border-bottom:1px solid var(--line)}
.org a:hover{border-color:var(--acc);color:var(--acc)}

/* ---------- образование и навыки ---------- */
.two{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;align-items:start}
@media (max-width:860px){.two{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:28px}
.card .ov{margin-bottom:6px}
.card .job{grid-template-columns:1fr;gap:6px;padding:18px 0;border-top:1px solid var(--line)}
.card .job:first-of-type{border-top:0}
.card .job h3{font-size:16px}
.card .job .org{margin:2px 0 0;font-size:14px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.tags span{background:var(--soft);border-radius:999px;padding:7px 14px;font-size:14px}

/* ---------- резюме: выделенная карточка (как «Empfohlen») ---------- */
.cta{border:1px solid var(--acc);border-radius:var(--r-card);background:#fff;
  box-shadow:0 10px 40px -12px rgba(37,99,235,.25);padding:48px;
  display:flex;gap:32px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cta h2{font-size:clamp(26px,2vw + 1rem,40px)}
.cta p{color:var(--mut);font-size:17px;margin-top:12px;max-width:52ch}
.cta .acts{margin-top:0}
@media (max-width:640px){.cta{padding:28px 22px}}

/* ---------- контакты ---------- */
.links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.links a{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  padding:20px 8px;text-decoration:none;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;
  transition:border-color .15s,box-shadow .15s}
.links a:hover{border-color:#d4d4d4;box-shadow:0 4px 16px rgba(0,0,0,.06)}
.links .ic{width:22px;height:22px;fill:none;stroke:var(--fg);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.links .k{font-family:var(--mono);font-size:12px;letter-spacing:0;
  color:var(--fg)}
.links .v{font-size:17px;font-weight:600;letter-spacing:-.015em;margin-top:4px;display:block}
@media (max-width:760px){.links{gap:6px}.links a{padding:14px 2px;border-radius:12px}.links .k{font-family:var(--sans,Arial,sans-serif);font-size:10px}.links .ic{width:20px;height:20px}}
.after{text-align:center;color:var(--mut);font-size:15px;margin-top:28px}

/* ---------- подвал (sent) ---------- */
footer{background:var(--dark);color:#e5e5e5;padding:64px 0 40px;font-size:14px}
footer .fr{display:flex;gap:40px;flex-wrap:wrap;justify-content:space-between}
footer .who b{display:block;font-size:17px;font-weight:600;color:#fff;margin-bottom:6px}
footer .who span{color:var(--dark-mut)}
footer .col{display:flex;flex-direction:column;gap:10px}
footer .col .ov{color:#737373;margin:0 0 4px;font-size:11px}
footer a{color:#e5e5e5;text-decoration:none}
footer a:hover{color:#fff}
footer .cr{border-top:1px solid var(--dark-line);margin-top:48px;padding-top:22px;color:#737373;font-size:13px}
.job .dur{display:block;margin-top:6px;color:#a3a3a3;font-size:12px}

/* Recruitment reading flow and keyboard navigation. */
[id]{scroll-margin-top:88px}
.skip{position:absolute;top:8px;left:16px;z-index:10001;padding:12px 18px;background:#fff;color:#111;transform:translateY(-160%)}
.skip:focus{transform:none}
.jump{display:inline-block;margin-top:20px;font-size:15px;text-underline-offset:5px}
.caps h3{font-size:17px}.caps p{color:#525252}
.job li{color:#525252}
.job .progression{font-size:14px;color:#525252;margin:0 0 18px;line-height:1.7}
.job:target{background:#f5f8ff}
@media(max-width:760px){
 .bar .w{height:60px}
 .bar nav{gap:12px}
 .bar nav>a:not(.btn){display:none}
 .bar nav .btn{font-size:13px;padding:0 14px}
 [id]{scroll-margin-top:80px}
 .hero{padding-top:44px}.hero .lede{font-size:18px}
 .links .v{overflow-wrap:anywhere}
}

/* Keep long translated text inside grid/flex cells and buttons. */
.job>div,.caps article,.case-card,.card,.cta>div{min-width:0}
.job h3,.job p,.job li,.caps h3,.caps p,.case-card dd,.cta p,.tags span{overflow-wrap:anywhere}
html[lang="de"] .job h3,html[lang="de"] .job p,html[lang="de"] .job li,
html[lang="de"] .caps p,html[lang="de"] .cta p{hyphens:auto;hyphenate-limit-chars:10 4 4}
.hero .role>span:not(.role-sep){display:inline-block;white-space:nowrap}
h2{text-wrap:balance}
.cta .acts{max-width:100%}
.acts .btn{max-width:100%;min-height:46px;height:auto;padding:12px 20px;
  white-space:normal;line-height:1.35;text-align:center;overflow-wrap:anywhere}
@media(max-width:360px){
 .hero h1{font-size:36px}
 .hero .role{display:flex;flex-direction:column;align-items:center;gap:6px}
 .hero .role .role-sep{display:none}
 .cta .acts{width:100%}
 .cta .acts .btn{width:100%}
}

.language-level{display:inline-block;white-space:nowrap}

/* Two-position language switch. */
.language-toggle{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:20px}
.language-label{font-size:14px;font-weight:500;color:#8a8a8a;transition:color .18s}
.language-label.is-selected{color:#111;font-weight:600}
.language-track{position:relative;display:block;width:60px;height:34px;background:#f0f0f0;border:1px solid #e5e5e5;border-radius:999px;flex-shrink:0;touch-action:manipulation}
.language-track::before{content:"";position:absolute;inset:-6px}
.language-knob{position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:50%;background:#101a2a;transform:translateX(0);transition:transform .18s ease}
.language-toggle[data-language="de"] .language-knob{transform:translateX(26px)}
.language-track:hover{background:#e9e9e9}
@media(prefers-reduced-motion:reduce){.language-knob,.language-label{transition:none}}

/* Mobile role disclosure: document icon before the position title. */
.role-toggle{display:none}
@media(max-width:760px){
  .roles-ready #career .role-company{display:inline}
  .roles-ready #career .role-toggle{display:inline-flex;align-items:center;justify-content:center;position:relative;vertical-align:-.12em;margin:0 9px 0 0;padding:0;border:0;background:transparent;color:#101a2a;font:inherit;width:1em;height:1em;cursor:pointer;touch-action:manipulation}
  .role-toggle::before{content:"";position:absolute;inset:-14px -10px}
  .role-toggle svg{display:block;width:100%;height:100%;overflow:visible}
  .role-toggle .document-sheet{fill:transparent;stroke:currentColor;stroke-width:1.4;transition:fill .2s ease}
  .role-toggle .document-lines{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;transition:stroke .2s ease}
  .role-open .role-toggle .document-sheet{fill:currentColor}
  .role-open .role-toggle .document-lines{stroke:#fff}
  .roles-ready #career .role-description{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .26s ease,visibility .26s}
  .roles-ready #career .role-open .role-description{grid-template-rows:1fr;visibility:visible}
  .roles-ready #career .role-clip{min-height:0;overflow:hidden}
  .roles-ready #career .role-content{border-left:1px solid #101a2a;padding-left:16px}
  .roles-ready #career .role-content p+p{margin-top:12px}
  .roles-ready #career .role-content li:last-child{margin-bottom:0}
  .roles-ready #career .job:not(.role-open) .org{margin-bottom:0}
}
@media(prefers-reduced-motion:reduce){
  .role-toggle rect,.role-toggle path,.roles-ready #career .role-description{transition:none}
}

.bar .brand-name{display:flex;flex-direction:row;align-items:baseline;gap:10px;line-height:1.15;white-space:nowrap}
.bar .brand-location{font-size:inherit;font-weight:400;letter-spacing:.02em;color:var(--muted,#777);white-space:nowrap}

.links .contact-logo{display:block;width:36px;height:36px;object-fit:contain}
.links a{min-height:76px;padding:18px 8px}
@media(max-width:760px){.links a{min-height:64px;padding:14px 4px}.links .contact-logo{width:32px;height:32px}}

@media(max-width:760px){.bar .w{gap:8px}.bar .id{gap:8px}.bar .id i{flex-shrink:0}.bar .brand-name{gap:8px}.bar .brand-location{font-size:inherit}}
@media(max-width:380px){.bar .id{font-size:14px}.bar nav .btn{padding:0 8px;font-size:12px}.bar .brand-name{gap:6px}}

@media(max-width:480px){.bar nav{display:none}}

.bar .id i{background:transparent;border-radius:0}.bar .id i img{display:block;width:26px;height:26px}

@media(max-width:760px){.bar .brand-location{display:none}}

/* Mobile header: one centered contact action. */
@media(max-width:760px){.bar .id{display:none}.bar .w{justify-content:center}.bar nav{display:flex;margin:0}.bar nav .btn{min-width:132px;height:38px;padding:0 24px;font-size:14px}}

#skills .tags span{transition:background-color .18s ease,color .18s ease}
@media(hover:hover){#skills .tags span:hover{background:#101a2a;color:#fff}}
@media(prefers-reduced-motion:reduce){#skills .tags span{transition:none}}

#career .job{transition:background-color .2s ease}
@media(hover:hover){#career .job:hover{background:#f0f6ff}}
@media(prefers-reduced-motion:reduce){#career .job{transition:none}}

#education .two{align-items:stretch}
#skills .tags{position:relative;gap:8px}
.skill-item{position:relative;max-width:100%}
.skill-chip{font:inherit;font-size:14px;border:0;border-radius:999px;padding:7px 14px;background:var(--soft);color:var(--fg);cursor:pointer;text-align:left;transition:background-color .18s,color .18s}
.skill-chip:hover,.skill-chip[aria-expanded="true"]{background:#101a2a;color:#fff}
.skill-chip:focus-visible{outline:2px solid #3976dc;outline-offset:3px}
.skill-detail{position:absolute;top:calc(100% + 6px);left:0;width:280px;max-width:calc(100vw - 80px);padding:16px;background:#101a2a;color:#fff;border-radius:12px;box-shadow:0 8px 24px #101a2a26;z-index:5;font-size:14px;line-height:1.5}
.skill-detail:before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}
.skill-detail p{margin:0}.skill-detail .skill-company{margin-top:10px;color:#b9d5ff;font-size:12px}
@media(max-width:860px){.skill-detail{position:static;width:auto;margin-top:8px}.skill-item:has(.skill-chip[aria-expanded="true"]){width:100%}}
@media(prefers-reduced-motion:reduce){.skill-chip{transition:none}}

.tool-strip{padding:32px 0 40px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tool-strip-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.tool-strip-heading .ov{margin:0}.tool-pause{display:none;background:transparent;border:1px solid var(--line);border-radius:50%;width:30px;height:30px;color:var(--mut);cursor:pointer}
.tool-animated .tool-pause{display:block}.tool-window{overflow:hidden;mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent)}
.tool-track{display:flex;width:max-content}.tool-group{display:flex;align-items:center;gap:48px;list-style:none;margin:0;padding:0 48px 0 0;flex-shrink:0}
.tool-group li{display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:19px;font-weight:600;color:#59616d}
.tool-group img{width:32px;height:32px;object-fit:contain;filter:grayscale(1);opacity:.75}
.tool-animated .tool-track{animation:tool-scroll 65s linear infinite}
.tool-strip:hover .tool-track,.tool-strip:focus-within .tool-track,.tool-paused .tool-track{animation-play-state:paused}
@keyframes tool-scroll{to{transform:translateX(-50%)}}
@media(max-width:760px){.tool-strip{padding:24px 0}.tool-group{gap:32px;padding-right:32px}.tool-group li{font-size:16px}.tool-group img{width:28px;height:28px}}
@media(prefers-reduced-motion:reduce){.tool-animated .tool-track{animation:none}.tool-window{overflow-x:auto;mask-image:none}.tool-group[aria-hidden]{display:none}.tool-animated .tool-pause{display:none}}

/* Лента инструментов: белые логотипы на чёрном, сразу под полосой цифр. */
.band + .tool-strip{margin-top:-1px}
.tool-strip{background:var(--dark);color:#fff;border-top:1px solid var(--dark-line);border-bottom:0}
.tool-strip .ov{color:#737373}
.tool-strip .tool-pause{border-color:var(--dark-line);color:#a3a3a3}
.tool-group li{color:#e5e5e5}
.tool-group img{filter:none;opacity:1}
.tool-group li{color:#fff}
.tool-window{mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent)}
.tool-animated .tool-track{animation-duration:var(--tool-dur,45s)}
.tool-strip{padding:28px 0}